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")}|

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. <App> 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

License

react-super-cmd is released under MIT license © saharmor.