flowlight/react/example.js

A lightweight command interface library with floating button, search functionality, and React integration

import React from 'react';
import { FlowLightProvider, useFlowLight } from 'flowlight/react';

// Example component using the useFlowLight hook
function SearchButton() {
  const { showSearch, isSearchVisible, toggleSearch } = useFlowLight();

  return (
    <div style={{ padding: '20px' }}>
      <h3>FlowLight React Integration</h3>
      
      <div style={{ marginBottom: '10px' }}>
        <button onClick={showSearch} style={{ marginRight: '10px' }}>
          Show Search
        </button>
        
        <button onClick={toggleSearch} style={{ marginRight: '10px' }}>
          Toggle Search
        </button>
        
        <span>Search is: {isSearchVisible ? 'Visible' : 'Hidden'}</span>
      </div>
      
      <p>
        Press <kbd>Ctrl/Cmd + K</kbd> to toggle the search interface, or use the buttons above.
      </p>
    </div>
  );
}

// Main App component
function App() {
  return (
    <FlowLightProvider options={{ debug: true, position: 'bottom-right' }}>
      <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto' }}>
        <h1>FlowLight Demo</h1>
        <SearchButton />
        
        <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '5px' }}>
          <h4>Features:</h4>
          <ul>
            <li>Floating search button (bottom-right)</li>
            <li>Keyboard shortcuts (Ctrl/Cmd + K)</li>
            <li>React hooks integration</li>
            <li>Debug mode enabled</li>
          </ul>
        </div>
      </div>
    </FlowLightProvider>
  );
}

export default App;