Manage keyboard shortcuts from one place

Last update: Feb 15, 2022

React Shortcuts

Manage keyboard shortcuts from one place.

Build Status

Intro

Managing keyboard shortcuts can sometimes get messy. Or always, if not implemented the right way.

Real problems:

  • You can't easily tell which shortcut is bound to which component
  • You have to write a lot of boilerplate code (addEventListeners, removeEventListeners, ...)
  • Memory leaks are a real problem if components don’t remove their listeners properly
  • Platform specific shortcuts is another headache
  • It's more difficult to implement feature like user-defined shortcuts
  • You can't easily get allthe application shortcuts and display it (e.g. in settings)

React shortcuts to the rescue!

With react-shortcuts you can declaratively manage shortcuts for each one of your React components.

Important parts of React Shortcuts:

  • Your keymap definition
  • ShortcutManager which handles keymap
  • <Shortcut> component for handling shortcuts

Try online demo

Edit l40jjo48nl

Quick tour

1. npm install react-shortcuts

2. Define application shortcuts

Create a new JS, Coffee, JSON or CSON file wherever you want (which probably is your project root). And define the shortcuts for your React component.

Keymap definition

{
 "Namespace": {
   "Action": "Shortcut",
   "Action_2": ["Shortcut", "Shortcut"],
   "Action_3": {
     "osx": "Shortcut",
     "windows": ["Shortcut", "Shortcut"],
     "linux": "Shortcut",
     "other": "Shortcut"
   }
 }
}
  • Namespace should ideally be the component’s displayName.
  • Action describes what will be happening. For example MODAL_CLOSE.
  • Keyboard shortcut can be a string, array of strings or an object which specifies platform differences (Windows, OSX, Linux, other). The shortcut may be composed of single keys (a, 6,…), combinations (command+shift+k) or sequences (up up down down left right left right B A).

Combokeys is used under the hood for handling the shortcuts. Read more about how you can specify keys.

Example keymap definition:
export default {
  TODO_ITEM: {
    MOVE_LEFT: 'left',
    MOVE_RIGHT: 'right',
    MOVE_UP: ['up', 'w'],
    DELETE: {
      osx: ['command+backspace', 'k'],
      windows: 'delete',
      linux: 'delete',
    },
  },
}

Save this file as keymap.[js|coffee|json|cson] and require it into your main file.

import keymap from './keymap'

3. Rise of the ShortcutsManager

Define your keymap in whichever supported format but in the end it must be an object. ShortcutsManager can’t parse JSON and will certainly not be happy about the situation.

import keymap from './keymap'
import { ShortcutManager } from 'react-shortcuts'

const shortcutManager = new ShortcutManager(keymap)

// Or like this

const shortcutManager = new ShortcutManager()
shortcutManager.setKeymap(keymap)

4. Include shortcutManager into getChildContext of some parent component. So that <shortcuts> can receive it.

class App extends React.Component {
  getChildContext() {
    return { shortcuts: shortcutManager }
  }
}

App.childContextTypes = {
  shortcuts: PropTypes.object.isRequired
}

5. Require the component

You need to require the component in the file you want to use shortcuts in. For example <TodoItem>.

import { Shortcuts } from `react-shortcuts`

class TodoItem extends React.Component {
  _handleShortcuts = (action, event) => {
    switch (action) {
      case 'MOVE_LEFT':
        console.log('moving left')
        break
      case 'MOVE_RIGHT':
        console.log('moving right')
        break
      case 'MOVE_UP':
        console.log('moving up')
        break
      case 'COPY':
        console.log('copying stuff')
        break
    }
  }

  render() {
    return (
      <Shortcuts
        name='TODO_ITEM'
        handler={this._handleShortcuts}
      >
        <div>Make something amazing today</div>
      </Shortcuts>
    )
  }
}

The <Shortcuts> component creates a <shortcuts> element in HTML, binds listeners and adds tabIndex to the element so that it’s focusable. _handleShortcuts is invoked when some of the defined shortcuts fire.

Custom props for <Shortcuts> component

  • handler: func
    • callback function that will fire when a shortcut occurs
  • name: string
    • The name of the namespace specified in keymap file
  • tabIndex: number
    • Default is -1
  • className: string
  • eventType: string
    • Just for gourmets (keyup, keydown, keypress)
  • stopPropagation: bool
  • preventDefault: bool
  • targetNodeSelector: DOM Node Selector like body or .my-class
    • Use this one with caution. It binds listeners to the provided string instead of the component.
  • global: bool
    • Use this when you have some global app wide shortcuts like CMD+Q.
  • isolate: bool
    • Use this when a child component has React's key handler (onKeyUp, onKeyPress, onKeyDown). Otherwise, React Shortcuts stops propagation of that event due to nature of event delegation that React uses internally.
  • alwaysFireHandler: bool
    • Use this when you want events keep firing on the focused input elements.

Thanks, Atom

This library is inspired by Atom Keymap.

GitHub

https://github.com/avocode/react-shortcuts
Comments
  • 1. Shortcuts when input is focused

    When an input is focused, the shortcuts don't work, which is quite normal when you want to type something in a text input. But when the input is a checkbox, I would like the shortcuts to work.

    Is there any way to do it?

    Reviewed by pdonias at 2016-09-23 15:12
  • 2. Handle null `platform.os.family`.

    This occurs for certain OSes, like Chrome OS.

    Per platform documentation[0], platform.os.family can be a string OR null.

    [0] https://github.com/bestiejs/platform.js/blob/master/doc/README.md#platformosfamily

    Reviewed by michelle at 2016-08-29 19:44
  • 3. Focused input-field doesn't prevent shortcuts

    My shortcuts (arrow left, right...) are executing even if an input field is focused. How can I avoid that?

    I can't stop the onKeyDown on the input directly, because with the Shortcuts Component as a parent no react keyEvent is firing anymore.

    Here it sound right, do I something wrong? https://github.com/avocode/react-shortcuts/issues/10

    DomRender

          <ShortcutSetup shortcutManager={shortcutManager}>  
              <Shortcuts name="App" handler={handle}>  
                <div><input onKeyPress={  
                  (event) => {  
                    // Not Executing  
                  }  
                } /></div>  
              </Shortcuts>    
          </ShortcutSetup>  
    

    ShortcutSetup

    export default class ShortcutSetup extends React.Component {
      constructor(props) {super(props)}
    
      render() {
        return(
          <div>{this.props.children}</div>
        )
      }
    
      getChildContext = function () {
        return {
          shortcuts: this.props.shortcutManager
        }
      }
    }
    
    ShortcutSetup.childContextTypes = {
      shortcuts: React.PropTypes.object.isRequired
    }
    

    merci!

    Reviewed by bunterWolf at 2016-10-16 15:58
  • 4. Replace lodash with local utils

    Fixes https://github.com/avocode/react-shortcuts/issues/24

    Alternative to https://github.com/avocode/react-shortcuts/pull/28

    Lodash wasn't being used too heavily, so instead of leaning on babel-plugin-lodash, it was pretty easy to replace it outright. This PR adds a small utils.js file with helpers that perform the same functionality lodash was being used for, in 42 lines.

    The only exception is _.reduce, which I replaced with just-reduce-object, a quite small and dependency-free library that functions the same way (with a small change in the signature of the iteratee).

    Existing tests still pass locally, and I'd be willing to add tests for the code in utils.js if you'd like as well.

    Reviewed by w33ble at 2017-09-22 21:56
  • 5. Only get event when focus on component

    Hi,

    I have an application with different components, each containing again other components. I have propagated the childContext up to my Component containing a Button. This button is wrapped in a tag.

    In my react developer tools I get confirmation that my ShortcutManager is indeed in the context of .

    I have added ctrl+n in the keymap. This event should be sent to my component no mather where the focus is on my Application.

    Ctrl+n only seems to work when I have focus on the button inside .

    I tried to set the shortcut as global, but doesn't work...

    Is it possible to get events without focus on a component?

    Thanks

    Reviewed by jvanhent at 2017-08-17 14:11
  • 6. avoid shortcut trigger when typing text in safari

    Safari doesn't yet implement KeyboardEvent.key ( https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key ). The hack comes from Stack Overflow: http://stackoverflow.com/a/4285801/72637

    Reviewed by nraynaud at 2016-11-14 23:43
  • 7. Parent shortcuts don't work on child shortcuts components.

    Here is an example.

    App.js

    import React, { Component } from 'react';
    import { ShortcutManager, Shortcuts } from "react-shortcuts";
    import PropTypes from 'prop-types';
    import Contents from "./Contents";
    
    const keyMap = {
      App: {
        search: "shift+f"
      },
      Contents: {
        print: "shift+p"
      }
    };
    const shortcutManager = new ShortcutManager(keyMap);
    
    class App extends Component {
      getChildContext() {
        return { shortcuts: shortcutManager }
      }
      render() {
        return (
          <Shortcuts name="App" handler={this.appHandler} alwaysFireHandler={true}>
            <h1>Title</h1>
            <Contents />
          </Shortcuts>
        );
      }
      appHandler = (action) => {
        if (action === "search") {
          console.log("start searching");
        }
      }
    }
    App.childContextTypes = {
      shortcuts: PropTypes.object.isRequired
    };
    
    export default App;
    

    Contents.js

    import React from "react";
    import { Shortcuts } from "react-shortcuts";
    
    export default class Contents extends React.Component {
      render() {
        return (
          <Shortcuts name="Contents" handler={this.handler}>
            <div>Contents</div>
          </Shortcuts>
        )
      }
      handler = (action) => {
        if (action === "print") {
          console.log("printing");
        }
      };
    }
    

    Click on Title and press shift + f, it works. Click on Contents and press shift + p, it works. But Click on Contents and press shift + f? It doesn't work.

    How can I make it work if I don't want to rebind shift + f again in Contents? Maybe it should work by default since Contents is part of App?

    Reviewed by searene at 2018-06-21 01:11
  • 8. Abilityt to add shortcuts ad-hoc

    At the moment the docs state:

    import keymap from './keymap'
    import { ShortcutManager } from 'react-shortcuts'
    
    const shortcutManager = new ShortcutManager(keymap)
    
    // Or like this
    
    const shortcutManager = new ShortcutManager()
    shortcutManager.setKeymap(keymap)
    

    How can a developer add keymaps during the runtime of an application. There may be new keymaps coming in. Aside from keeping our own cache of the full keymap, it would be nice to have something like:

    shortcutManager.updateKeyMap(additionalMaps);
    
    Reviewed by raybooysen at 2017-10-17 07:29
  • 9. tabIndex={0} doesn't work

    Looks like shortcuts.js uses a truthy check to default to index of -1 rather than a null check. This means that it's impossible to set the tabindex to 0 so the shortcuts uses the pages tab order. In particular, I believe this line is the culprit:

    https://github.com/avocode/react-shortcuts/blob/master/src/component/shortcuts.js#L73

    Reviewed by clausman at 2017-08-01 19:09
  • 10. Need to be able to handle shortcuts even if focus is on an input element

    Often you need to have global shortcuts that will be propagated even if we are typing in an input or contentEditable element. As an example in the browser if I an in an input and type cmd+w it will still close my browser window. I believe this we need to have a prop that is used here https://github.com/avocode/react-shortcuts/blob/master/src/component/shortcuts.js#L112 so that we can ignore returning false.

    Reviewed by bradbirnbaum at 2016-12-20 15:47
  • 11. The reason for Mousetrap?

    I try to setup a relative complex keyhandling for an filemanager with electron. And i'm still researching... not an easy topic :)

    You and react-hotkeys decided both for using Mousetrap and I would like to understand the reason for that:)

    The negative side of Mousetrap is, that you loose the control on the keyboard Event Handling in react, because Mousetrap handles events. (You can get them in react with isolate=true (greate!), but you are handling them still after Mousetrap did already something)

    Mousetrap does the mapping of the Shortcut-Strings 'ctrl+alt+i' and the keyboard-event. But to build that for react events looks easy to me right know.

    What do I miss? :)

    merci!

    Reviewed by bunterWolf at 2016-10-25 11:30
  • 12. Support React 17

    Overview

    Hello! I was curious if React 17 support was on the roadmap to be added to react-shortcuts? Thanks!

    Package versions

    react-shortcuts version: @latest

    Reviewed by chrisgbaker at 2021-12-03 15:54
  • 13. Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-11 04:00
  • 14. Bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-04 08:40
  • 15. Bump hosted-git-info from 2.5.0 to 2.8.9

    Bumps hosted-git-info from 2.5.0 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-10 15:33
  • 16. Bump lodash from 4.17.4 to 4.17.21

    Bumps lodash from 4.17.4 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-09 09:52
  • 17. Bump handlebars from 4.0.10 to 4.7.7

    Bumps handlebars from 4.0.10 to 4.7.7.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.7 - February 15th, 2021

    • fix weird error in integration tests - eb860c0
    • fix: check prototype property access in strict-mode (#1736) - b6d3de7
    • fix: escape property names in compat mode (#1736) - f058970
    • refactor: In spec tests, use expectTemplate over equals and shouldThrow (#1683) - 77825f8
    • chore: start testing on Node.js 12 and 13 - 3789a30

    (POSSIBLY) BREAKING CHANGES:

    • the changes from version 4.6.0 now also apply in when using the compile-option "strict: true". Access to prototype properties is forbidden completely by default, specific properties or methods can be allowed via runtime-options. See #1633 for details. If you are using Handlebars as documented, you should not be accessing prototype properties from your template anyway, so the changes should not be a problem for you. Only the use of undocumented features can break your build.

    That is why we only bump the patch version despite mentioning breaking changes.

    Commits

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-07 16:46
An easy-to-use keyboard event react component, Package size less than 3kb
An easy-to-use keyboard event react component, Package size less than 3kb

An easy-to-use keyboard event react component, Can achieve a variety of custom keyboard functions, Package size less than 3kb

May 5, 2022
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Apr 1, 2022
React hook for using keyboard shortcuts in components.

react-hotkeys-hook React hook for using keyboard shortcuts in components. This is a hook version for the hotkeys package. Documentation and live examp

May 15, 2022
A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

react-native-keyboard-accessory A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard. Expo Snack Playground https:

May 13, 2022
The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector
The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector. Once our system is connected to the keyboard, the user can interactively learn, play or teach in combination with the web application that we provide.

Feb 7, 2022
😍 All kinds of resources for Developers 🔱 in one place.
 😍 All kinds of resources for Developers 🔱 in one place.

?? All kinds of resources for Developers ?? in one place.

May 7, 2022
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.

React front-end for tclone Try it here back-end repo here looks like twitter, but not ?? It is my own take on building Twitter clone, I have tried to

May 8, 2022
🍿 React component for animating an element's children, one by one
🍿 React component for animating an element's children, one by one

react-smooth-list ?? React component for animating an element's children, one by one. Installation This package is distributed via npm. npm install re

Apr 7, 2022
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js

Minimal One Page Clean and Minimalistic One Page Template. Be sure to send your

Mar 7, 2022
React Hook for trigger effect from any place of code

react-use-trigger React Hook for trigger effect from any place of code. It is an implementation a Pub-Sub strategy on React Hooks. Small 305 bytes (mi

Mar 16, 2022
React Native Wrapper of Google Place Picker for iOS + Android.
React Native Wrapper of Google Place Picker for iOS + Android.

react-native-google-place-picker React Native Wrapper of Google Place Picker for iOS + Android. iOS Android Table of contents Install iOS Android Usag

May 9, 2022
Here is the place try to learn to call API using React.js with anything your code style and contribute to open-source. Part of Hacktoberfest

Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage About The Project To welcome hacktoberfest we provide

Feb 28, 2022
React library to send nodes into a node at a different place in the component tree.

Unopinionated React library to render content into another place of the React tree (without losing the React context). This is especially useful for modals or popovers.

Jun 4, 2020
EPYG: Every Place You Go WebSite Bulit Using React

MLH Project - EPYG EPYG: Every Place You Go! Try in link Vercel is used to upload this repository and you can check out this project here. (However, t

Dec 5, 2021
Instagram Clone | A place where you could share photos, like media, and follow peoples.
Instagram Clone | A place where you could share photos, like media, and follow peoples.

Apollo Instagram Clone Instagram Clone | Social Media Application Web UI Mobile UI Stacks Used Frontend Backend React GraphQL + Express TailwindCSS Ty

Apr 21, 2022
Json Place Holder Album Built With React.Js
Json Place Holder Album Built With React.Js

JSONPlaceHolder albuns ?? Technologies ReactJS Typescript External API (jsonplac

Dec 27, 2021
TaxiApp-react-typescript - A simple taxi application that allows you to look for a taxi nearby your place

Taxi Application A simple taxi application that allows you to look for a taxi ne

Jan 10, 2022
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

react-data-grid Install npm install react-data-grid react-data-grid is published as ES2019 modules, you'll probably want to transpile those down to sc

May 8, 2022
React component to handle keyboard events :key:

react-key-handler ?? React component to handle keyboard events (such as keyup, keydown & keypress). Testimonials “Happy to see that react-key-handler

Apr 18, 2022
Plug and play react-native keyboard spacer view.
Plug and play react-native keyboard spacer view.

react-native-keyboard-spacer Plug and play iOS react-native keyboard spacer view. Quick Start Install View: npm install --save react-native-keyboard-s

May 5, 2022