npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

forked-react-shortcuts

v0.7.4

Published

React shortcuts

Downloads

5

Readme

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

DEMO: http://avocode.github.io/react-shortcuts/

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"
   }
 }
}
  • 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). 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).

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

Example keymap definition (in CoffeeScript):
module.exports =
  TodoItem:
    MOVE_LEFT: 'left'
    MOVE_RIGHT: 'right'
    MOVE_UP: ['up', 'w']
    COPY:
      osx: 'command+c'
      windows: 'ctrl+c'
      linux: 'ctrl+c'

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

keymap = require './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.

keymap = require './keymap'
ShortcutsManager = require 'react-shortcuts'

shortcutManager = new ShortcutsManager(keymap)

# Or like this

shortcutManager = new ShortcutsManager()
shortcutManager.setKeymap(keymap)

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

App = React.createClass
  displayName: 'App'

  childContextTypes:
    shortcuts: React.PropTypes.object.isRequired

  getChildContext: ->
    shortcuts: shortcutManager

5. Require the component

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

Shortcuts = require `react-shortcuts/component`

TodoItem = React.createClass
  displayName: 'TodoItem'

  _handleShortcuts: (action) ->
    switch action
      when 'MOVE_LEFT' then console.log('moving left')
      when 'MOVE_RIGHT' then console.log('moving right')
      when 'MOVE_UP' then console.log('moving up')
      when 'COPY' then console.log('copying stuff')

  render: ->

      div className: 'todo-item',

      Shortcuts
        name: @constructor.displayName
        handler: @_handleShortcuts,

        div null,
          'Buy some milk'

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.isRequired
  • name: string.isRequired
  • element: func (React.DOM)
    • You can render a custom element instead of the default shortcuts one
  • tabIndex: number
    • Default is -1
  • className: string
  • eventType: string
    • Just for gourmets
  • stopPropagation: bool
  • targetNode: DOM Node
    • Use this one with caution. It binds listeners to the provided string instead of the component.

To not trigger the handler callback set native-key-bindings className to whichever element you need.

Thanks, Atom

This library is inspired by Atom Keymap.