https://github.com/bugwheels94/react-keypress.js-wrapper

https://github.com/bugwheels94/react-keypress.js-wrapper

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/bugwheels94/react-keypress.js-wrapper
• Owner: bugwheels94
• Created: 2020-11-20T22:31:46.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2020-11-20T22:47:05.000Z (over 5 years ago)
• Last Synced: 2025-03-20T14:06:00.141Z (about 1 year ago)
• Language: JavaScript
• Size: 371 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## Introduction

  This is a library to Bind Keyboard shortcuts to react components

## Installation

    npm i react-keypress.js-wrapper

## API

  This library provides 3 components.

  1. Context Provider Component `KeyboardShortcutsProvider`

         import { KeyboardShortcutsProvider } from 'react-keypress.js-wrapper'

      You need to wrap it at the very top of your React App, preferably `App.js`. This just creates the context and passes it down to your app so that all of the shortcuts are stored somewhere.

  1. HOC Component `withKeyboardShortcuts`

         import { withKeyboardShortcuts } from 'react-keypress.js-wrapper'

      This is just a higher order component. This will provide all of the current active shortcuts to the passed components.

          function Component({

            keyboardShortcuts

          }) {

            // keyboardShortcuts will be an Array of Objects

            // value is passed shortcut value and 

            // description is passed description value

          }

          withKeyboardShortcuts(Component)

  1. Shortcut Component `KeyboardShortcuts`

         import { KeyboardShortcuts } from 'react-keypress.js-wrapper'

      Use this component to define the `combo` with the `callback` and the `description`. Use as

         

## Development

  The code is stored inside `src/lib` and the rest of the code is just to check and run the app based upon the library.

## Publish to npm

  Run `npm run build-lib` followed by `npm publish`

## Test

  Run `npm start` to see the app based upon this library