React-super-cmd NPM

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

Installation

npm

npm install --save react-super-cmd

yarn

yarn add react-super-cmd

Usage

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: <SearchOutlinedIcon/>, shortcut: 'S', callback: () => console.log('search')
    },
    ADD_CONTACT: {
      name: 'Add', logo: <AddCircleOutlineIcon/>, shortcut: '⌘ A', callback: () => console.log('add')
    },
  };

  function toggleIsOpen() {
    setCmdLineModal(previousState => !previousState);
  };

  return (
    <CommandLineModal commands={commands} 
                      isOpen={cmdLineModal} 
                      toggleIsModalOpen={toggleIsOpen}
                      title={"Super Command"} 
                      logo={<OfflineBoltOutlined/>}
                      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: <SearchOutlinedIcon/>, shortcut: 'S', callback: () => console.log('search')
    },
    ADD_CONTACT: {
      name: 'Add', logo: <AddCircleOutlineIcon/>, 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	`<SearchOutlinedIcon/>` 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")}