Quick Start

The fastest way to get you going.

Install

Yarn

yarn add react-hotkeys-docs-hook

NPM

npm i react-hotkeys-docs-hook --save

Note: React 16.8+ is required to use Hooks.

Usage

import { useHotkeysDocs, HotkeysDocs } from 'react-hotkeys-docs-hook';

const InnerSection = () => {
  useHotkeysDocs('A', 'Cool hotkey', 'b', () =>
    console.log('Cool hotkey called!')
  );
  return (
    <div>
      <h1>Section A</h1>
      Lorem
    </div>
  );
};

const AnotherInnerSection = () => {
  useHotkeysDocs('B', 'Another cool hotkey', 'a', () =>
    console.log('Another cool hotkey called!')
  );
  return (
    <div>
      <h1>Section B</h1>
      Ipsum
    </div>
  );
};

const App = () => {
  const [hotkeysDocs, setHotkeysDocs] = React.useState < HotkeysDocs > [];

  return (
    <HotkeysDocsContext.Provider value={{ hotkeysDocs, setHotkeysDocs }}>
      <div>
        {Object.keys(hotkeysDocs).map(section => (
          <div key={section}>
            <h2>{section}</h2>
            {hotkeysDocs[section].map(k => (
              <span>
                <pre>{k.keys}</pre>
                {k.description}
              </span>
            ))}
          </div>
        ))}
      </div>
      <br />
      <InnerSection />
      <AnotherInnerSection />
    </HotkeysDocsContext.Provider>
  );
};

Out of the box support for TypeScript

react-hotkeys-docs-hook is written in TypeScript, so we don't have to install any additional typings.