Skip to content

saharmor/react-super-cmd

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Commandline modal

React Super Command ⚡

NPM JavaScript Style Guide

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.