use-keybind

0.0.5-alpha • Public • Published

useKeyBind

TODO

Usage

useKeyBind(element, bindings)

Parameters

  • element/ref {EventTarget} - An EventTarget or a React.createRef() to apply keybindings.

  • bindings {object} - An object that maps keybindings to their respective functions.

{
    // binding: callbackFn or callbackFn[]
    'ctrl+t': onOpenTab,
    'ctrl+shift+s': [onSave, onSubmit],
    'ctrl+f': () => inputRef.current.focus(),
}

Example

import { useKeyBind } from 'use-keybind';
 
function AdminPage() {
    const onSave = () => {/* ... */}
    const onSubmit = () => {/* ... */}
    const adminRef = useRef();
 
    useKeyBind(adminRef, {
        'ctrl+s': onSave, 
        'alt+s': onSave,
        'ctrl+shift+s': [onSave, onSubmit],
    });
 
    return (
        <Admin ref={adminRef}>
            <UserInfoSection>
                <Form name='user-info'>
                    {/* ... */}
                </Form>
            </UserInfoSection>
        </Admin>
    );
}

Supported Keys

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

Package Sidebar

Install

npm i use-keybind

Weekly Downloads

1

Version

0.0.5-alpha

License

ISC

Unpacked Size

244 kB

Total Files

12

Last publish

Collaborators

  • btoles