Shortcut Commander

Setup shortcuts for your react app easily.

Install

npm install --save button-commander

Using yarn:

yarn add button-commander

Usage

import * as React from "react";
 
import useCommander from "button-commander";
 
const Example = () => {
  useCommander(
    undefined,
    [
      {
        name: "Green Color",
        shortcut: { windows: ["ctrl", "z"], macOS: ["meta", "z"] },
        description: "Change background color to green",
        callback: () => (document.body.style.background = "#64C964"),
        stopBubblingUp: true,
      },
      {
        name: "Yellow Color",
        shortcut: { windows: ["ctrl", "x"], macOS: ["meta", "x"] },
        description: "Change background color to yellow",
        callback: () => (document.body.style.background = "#fdd231"),
      },
      {
        name: "Red Color",
        shortcut: { windows: ["ctrl", "c"], macOS: ["meta", "c"] },
        description: "Change background color to red",
        callback: () => (document.body.style.background = "#FF614D"),
      },
    ]
  );
 
  return <div>hello world!</button>;
};

Live Demo

Found this project useful? ❤️

If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.

Issues and feedback 💭

If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.

License

MIT © fayeed

---

This hook is created using create-react-hook.