0.1.1 • Published 5 years ago
command-palette-react v0.1.1
Command Palette React
A Command Palette React Component
Installation
npm install command-palette-react
or
yarn add command-palette-react
Usage
Basic command palette
import React from 'react'
import CommandPaletteReact from 'command-palette-react'
export MyReactComponent = (props) => {
// Manage the command palette visibility outside of the component.
// This allows for greater flexibility and less needless rendering.
// This way the command palette can be set to show on keyboard events, button presses, etc.
const [showCommandPalette, setShowCommandPalette] = useState(false)
if (!showCommandPalette) return null;
const someAction = () => {
// do something if 'Test Result' is chosen
}
const someOtherAction = () => {
// do something if 'Another result' is chosen
}
return {
<CommandPaletteReact
// This text is rendered as placeholder text in the search input
placeholder="Type a command here"
// This is the searchable data. Search is based on caption text
data={
[{
caption: 'Test Result',
callback: () => someAction()
},{
caption: 'Another result',
callback: () => someOtherAction()
}]
}
// This will get called when a result is chosen or if the Escape key is pressed
hideCommandPalette={ () => setShowCommandPalette(false) }
theme={ {darkMode: true} }
/>
}
}
To do
- Custom shortcuts
- Better theme/styling system
- Test coverage
Contributing
Changes are welcome. Please use typescript and ts-lint.