Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saharmor/react-super-cmd
A sleek command palette modal for React apps
https://github.com/saharmor/react-super-cmd
accessability command-line command-palette navigation react reactjs shortcuts superhuman
Last synced: 29 days ago
JSON representation
A sleek command palette modal for React apps
- Host: GitHub
- URL: https://github.com/saharmor/react-super-cmd
- Owner: saharmor
- License: mit
- Created: 2020-12-08T16:33:45.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-09T00:36:27.000Z (about 1 year ago)
- Last Synced: 2024-11-06T16:51:55.432Z (about 1 month ago)
- Topics: accessability, command-line, command-palette, navigation, react, reactjs, shortcuts, superhuman
- Language: JavaScript
- Homepage: https://saharmor.github.io/react-super-cmd/
- Size: 2.52 MB
- Stars: 64
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-command-palette - React super command
README
React Super Command ⚡
[](https://www.npmjs.com/package/react-super-cmd) [](https://standardjs.com)
The command-line experience for the no-mouse generation. A blazing fast command line for your users to seamlessly interact with your React app.
[Live demo](https://saharmor.github.io/react-super-cmd/)
## Installation
### npm
```bash
npm install --save react-super-cmd
```
### yarn
```bash
yarn add react-super-cmd
```
## Usage
```jsx
import React from 'react';
import CommandLineModal from "react-super-cmd";
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import RemoveCircleOutlineOutlinedIcon from '@material-ui/icons/RemoveCircleOutlineOutlined';
import OfflineBoltOutlined from "@material-ui/icons/OfflineBoltOutlined";
const App = () => {
const [cmdLineModal, setCmdLineModal] = useState(true);
const commands = {
SEARCH_CONTACT: {
name: 'Search', logo: , shortcut: 'S', callback: () => console.log('search')
},
ADD_CONTACT: {
name: 'Add', logo: , shortcut: '⌘ A', callback: () => console.log('add')
},
};
function toggleIsOpen() {
setCmdLineModal(previousState => !previousState);
};
return (
}
noOptionsText = "No commands found. Try a different search term."
/>
);
};
export default App;
```
## Props
### commands
Object representing the different commands to list. The key is command's name and value is another object containing command details. Example:
```
const commands = {
SEARCH_CONTACT: {
name: 'Search', logo: , shortcut: 'S', callback: () => console.log('search')
},
ADD_CONTACT: {
name: 'Add', logo: , shortcut: '⌘ A', callback: () => console.log('add')
},
};
```
Command details varibales
| Parameter | Type | Description | Example |
| :--------- | :-------- | :---------- | :----- |
| name | `string` | The text to be displayed for this command| Search
| logo | `component` | Component that will be next to command's name |`` from Material UI|
| shortcut | `string` | Shortcut text to display next to command name |⌘ S|
| callback | `func` | A function callback text to be displayed for this command|function searchCallback() {
console.log("search called")
}|
### isOpen
If true, command line modal will be visible.
### toggleIsModalOpen
A function to be called to toggle modal state. Used to control isOpen state within the external component (e.g. `Super Command` in above example).
### title
The title to be displayed for the command line modal (e.g. `` in above example)
### logo
Optional
A logo component to display as part of the title
### noOptionsTest
Optional
Text to show when no commands were found based on input search term
## Development
Follow create-react-library's [development guide](https://www.npmjs.com/package/create-react-library#development)
## License
`react-super-cmd` is released under MIT license © [saharmor](https://github.com/saharmor).