react-key-press-notice v0.0.7

React-key-press-notice

A simple React component to display the currently pressed key on the screen in real-time.

Feature

To prevent sensitive information from being displayed, you can use the enable prop to conditionally enable or disable the component based on specific use cases. Additionally, it can auto disable when a password input field is focused.

Installation

npm install react-key-press-notice

Usage

import KeyPressNotice from 'react-key-press-notice';

function App() {
  return <KeyPressNotice />;
}

export default App;

Example: Custom key emoji keyMap

<KeyPressNotice
  customKeyEmojiMap={{
    'Enter': '⏎',
    'Backspace': '⌫',
    'Tab': '⇥',
    'Space': '␣',
    'ArrowUp': '↑',
    'ArrowDown': '↓',
    'ArrowLeft': '←',
    'ArrowRight': '→',
  }}
/>

Props

License:

MIT

Thanks

@YuanLiu