Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liorp/react-hotkeys-docs-hook
https://github.com/liorp/react-hotkeys-docs-hook
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/liorp/react-hotkeys-docs-hook
- Owner: liorp
- License: mit
- Created: 2022-02-04T15:42:19.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-05T10:12:14.000Z (almost 3 years ago)
- Last Synced: 2024-11-13T09:51:19.390Z (2 months ago)
- Language: TypeScript
- Homepage: react-hotkeys-docs-hook.vercel.app
- Size: 31.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hotkeys-docs-hook
[](https://codesandbox.io/s/react-docs-hotkeys-hook-example-87ifc?fontsize=14&hidenavigation=1&theme=dark)
This is a thin wrapper for [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/) package to allow dynamically documenting the hotkeys.
This means that the every hotkey that a component registers is added to a global context, and removed from the context upon the component unmount, to ensure fresh list of hotkeys.
## Documentation
- [Quick Start](https://react-hotkeys-docs-hook.vercel.app/docs/intro)
- [API](https://react-hotkeys-docs-hook.vercel.app/docs/api/useHotkeysDocs)
## Installation
```shell
npm install react-hotkeys-docs-hook
```
or
```shell
yarn add react-hotkeys-docs-hook
```
Make sure that you have at least version 16.8 of `react` and `react-dom` installed, or otherwise hooks won't work for you.
## Usage
```ts
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
useHotkeysDocs,
useHotkeysDocsContext,
HotkeysDocsContext,
Hotkey,
} from 'react-hotkeys-docs-hook';
const InnerSection = () => {
useHotkeysDocs('A', 'Cool hotkey', 'b', () =>
console.log('Cool hotkey called!')
);
return (
Section A
Lorem
);
};
const AnotherInnerSection = () => {
useHotkeysDocs('B', 'Another cool hotkey', 'a', () =>
console.log('Another cool hotkey called!')
);
return (
Section B
Ipsum
);
};
export const HotkeysDocs = () => {
const { hotkeysDocs } = useHotkeysDocsContext();
const sections = hotkeysDocs.map(v => v.section);
return (
{sections.map(s => (
{s}
{hotkeysDocs
.filter(v => v.section === s)
.map(k => (
{k.keys}
{k.description}
))}
))}
{!hotkeysDocs && 'No hotkeys available'}
);
};
const App = () => {
const [hotkeysDocs, setHotkeysDocs] = React.useState([]);
return (
);
};
```
### Call Signature
```ts
function useHotkeyDocs(
section: string,
description: string,
keys: string,
callback: (event: KeyboardEvent, handler: HotkeysEvent) => void,
options: Options = {},
deps: any[] = []
): React.MutableRef;
```