Skip to content

acrool/acrool-react-hotkey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Acrool React Hotkey

Acrool React Hotkey Logo

This is a toast message function for React development notifications

NPM npm npm

npm downloads npm

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:

Play react-editext-example

License

MIT © Acrool & Imagine