react-shrtcts
v1.0.4-rc.1
Published
Simple keyboard shortcuts for react
Downloads
11
Readme
Table of Contents
- Install the package
- About the Project
- Getting Started
- Usage
- Roadmap
- Contributing
- License
- Contact
- Acknowledgements
Installation
yarn
yarn add react-shrtcts
npm
npm i react-shrtcts
About The Project
NOTE: This is very much still a W.I.P dont excpect miracles
We created this package because there simply was no other option out there (or atleast on page 1 of google). We have developed a convenient hook for devs to use that will connect different key combinations with a relevant function!
The hook utilises its own context to ensure state is maintained and the dom isnt littered with events
Built With
Getting Started
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
Prerequisites
This is an example of how to list things you need to use the software and how to install them.
Usage
// YourApp.tsx
<ShortcutProvider>
// ... Your Components
</ShortcutProvider>
// YourComponent.tsx
useShortcuts([{
keys: ['ctrl', 's'],
fn: (event: SpeshEvent) => {
// do awesome stuff
}
}])
The ShortcutConfig
object array passed to the useShortcuts
hook is of the shape:
interface ShortcutConfig {
/**
* Simple array of string key values
* When all keys are pressed in combination the `ShortcutFunction` will be run
*/
keys: KeyMap
/**
* The function to run when all keys are pressed
*/
fn: ShortcutFunction
/**
* A short description on the keybinds function, this will be used to display to the user
*/
description?: string
}
Demo Application
Check the demo
directory for a working example.
View the working demo @react-shrtcts
Roadmap
View the Roadmap
See the open issues for a list of proposed features (and known issues).
Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE
for more information.
Contact
Project Link: https://github.com/react-shrtcts/react-shrtcts