# use-keybinds

> Lightweight keybind library for React

Latest version **0.3.2** (published 2025-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-keybinds
pnpm add use-keybinds
yarn add use-keybinds
bun add use-keybinds
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2025-09-09 |
| First published | 2024-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 77.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | officialpesonen |
| Keywords | react, keybinds, hotkeys, typescript |

## Links

- npm: https://www.npmjs.com/package/use-keybinds
- Repository: https://github.com/OfficialPesonen/use-keybinds
- npm.io page: https://npm.io/package/use-keybinds

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.2 (latest) — 2025-09-09
- 0.3.1 — 2025-05-24
- 0.3.0 — 2025-05-24
- 0.2.0 — 2024-03-13
- 0.1.2 — 2024-03-05
- 0.1.1 — 2024-03-05
- 0.1.0 — 2024-03-05

## README

# use-keybinds
A lightweight and typesafe library for managing keybinds in React applications.

## Features
- Single keypresses such as (ArrowUP)
- Multiple keypresses such as (Ctrl + C)
- Sequential keypresses such as (G then H)

## Usage
```tsx
import {KeybindsProvider, useKeybinds} from "use-keybinds";

// Optional but heavily recommended for type safety
export type KeybindSlug = "SUBMIT" | "GO_TO_HOME";

const App = () => {
    return (
        <KeybindsProvider<KeybindSlug>
            keybinds={{
                SUBMIT: {
                    name: "Submit form",
                    keybind: ["Enter"]
                },
                GO_TO_HOME: {
                    name: "Go to home",
                    keybind: ["KeyG", "KeyH"],
                    isSequential: true
                }
            }}
        >
            <Component/>
        </KeybindsProvider>
    );
};

const Component = () => {
    const [current, setCurrent] = useState<string>("");

    useKeybinds<KeybindSlug>({
        SUBMIT: (e) => {
            e.preventDefault();
            setCurrent("submit")
        },
        GO_TO_HOME: (e) => {
            e.preventDefault();
            setCurrent("go to home")
        }
    })

    return (
        <div>
            <p>Current keybind: {current}</p>
        </div>
    )
}
```

## License
MIT

---
_Source: https://npm.io/package/use-keybinds · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._