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

    Install

    npm i use-keybind

    DownloadsWeekly Downloads

    13

    Version

    0.0.5-alpha

    License

    ISC

    Unpacked Size

    244 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar