https://github.com/alima-webdev/keystroke-input
Keystroke Input Element
https://github.com/alima-webdev/keystroke-input
custom-elements form html input webcomponents
Last synced: 5 months ago
JSON representation
Keystroke Input Element
- Host: GitHub
- URL: https://github.com/alima-webdev/keystroke-input
- Owner: alima-webdev
- License: gpl-3.0
- Created: 2024-05-17T22:02:16.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-14T05:06:58.000Z (about 1 year ago)
- Last Synced: 2025-07-24T10:33:16.425Z (12 months ago)
- Topics: custom-elements, form, html, input, webcomponents
- Language: TypeScript
- Homepage:
- Size: 41 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Keystroke Input Component for React
A lightweight and customizable React component that captures and displays user keystrokes in real-time. Perfect for keyboard shortcut editors, typing games, or accessibility tools.
## Features
- Real-time keystroke capturing
- Customizable display and behavior
- Easy integration with any React project
- Supports modifier keys (Ctrl, Alt, Shift, etc.)
## Installation
```bash
npm install keystroke-input
# or
yarn add keystroke-input
```
## Usage
```jsx
import KeystrokeInput from 'keystroke-input';
function App() {
return (
Press any key
);
}
```
## Example
Visual input display
```
Windows: Ctrl + Shift + A
or
MacOS: ⌘ ⇧ A
```
Actual field value
```json
{
"altKey": false,
"ctrlKey": false,
"metaKey": true,
"shiftKey": true,
"code": "KeyA"
}
```
## Styling
The component comes with minimal styling. You can easily customize it via CSS or by passing a custom `className` or using Tailwind classes.
## Development
Clone the repo and run locally:
```bash
git clone https://github.com/alima-webdev/keystroke-input.git
cd keystroke-input
npm install
npm run dev
```
## License
GPL-3.0 © [](https://github.com/alima-webdev)