Acrool React Hotkey

^1.0.0 support react >=18.0.0 <20.0.0

Features

• Supports dom onKeyDown
• Supports not repeat onKeyDown
• componentOnMount add listen, componentUnMount remove listen

Install

yarn add @acrool/react-hotkey

Usage

import {generateOnKeydown, HotkeyListener} from '@acrool/react-hotkey';

const Example = () => {
    const handleSave = () => {
        // white yourr code
    }
    const handleCancel = () => {
        // white yourr code
    }
    
    /**
     * Save
     */
    const handleOnKeyDown = (e) => {
        generateOnKeydown('ctrl+enter', handleSave)(e);
        generateOnKeydown('escape', handleCancel)(e);
    };
    
    return (<>
            <input type="text" onKeyDown={handleOnKeyDown}/>
            <HotkeyListener hotKey="ctrl+," onKeyDown={() => console.log('to setting')} />
        </>
    );
};

There is also a example that you can play with it:

License

MIT © Acrool & Imagine