https://github.com/officialpesonen/use-keybinds
A lightweight and typesafe library for managing keybinds in React applications.
https://github.com/officialpesonen/use-keybinds
keybinds react
Last synced: 8 months ago
JSON representation
A lightweight and typesafe library for managing keybinds in React applications.
- Host: GitHub
- URL: https://github.com/officialpesonen/use-keybinds
- Owner: OfficialPesonen
- Created: 2024-03-05T13:06:30.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-05-24T14:20:16.000Z (about 1 year ago)
- Last Synced: 2025-06-30T23:06:15.341Z (12 months ago)
- Topics: keybinds, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-keybinds
- Size: 227 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 (
keybinds={{
SUBMIT: {
name: "Submit form",
keybind: ["Enter"]
},
GO_TO_HOME: {
name: "Go to home",
keybind: ["KeyG", "KeyH"],
isSequential: true
}
}}
>
);
};
const Component = () => {
const [current, setCurrent] = useState("");
useKeybinds({
SUBMIT: (e) => {
e.preventDefault();
setCurrent("submit")
},
GO_TO_HOME: (e) => {
e.preventDefault();
setCurrent("go to home")
}
})
return (
Current keybind: {current}
)
}
```
## License
MIT