hodgef
/
react-simple-keyboard
React Virtual Keyboard - Customizable, responsive and lightweight
![simple-keyboard: Javscript Virtual Keyboard](https://res.cloudinary.com/practicaldev/image/fetch/s--cqTHj7B7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://user-images.githubusercontent.com/25509135/188000091-fc64ce47-2a87-4835-ab6c-defbaba3ee90.gif)
Virtual Keyboard for React. Customizable, responsive and lightweight.
🚀 Demo
https://simple-keyboard.com/demo
📦 Installation & Usage
Check out the Getting Started docs to begin.
📖 Documentation
Check out the simple-keyboard documentation site.
Feel free to browse the Questions & Answers page for common use-cases.
To run demo on your own computer
- Clone this repository
npm install
npm start
- Visit http://localhost:3000/
Other versions
Questions? Join the chat
🎯 Compatibility
- Internet Explorer 11
- Edge (Spartan) 16+
- Edge (Anaheim/Edge Chromium) 79+
- Chrome 49+
- Safari 9+
- Firefox 57+
- iOS 9+
Note: If you don't want to support old browsers, you can use the Modern Browsers bundle (index.modern.js).
✅ Contributing
PRs and issues are welcome. Feel free to submit any issues you have at: https://github.com/hodgef/react-simple-keyboard/issues
react-simple-keyboard has a nice default layout but I needed to create a custom version for our usage.
For doing that, I needed to define my own layout and add a switching function to change a layout by clicking shift, numbers, symbols keys.
The code is below.
[custom keyboard]
https://codesandbox.io/s/festive-matsumoto-bn3kbv?file=/src/components/CustomKeyboard.tsx
Top comments (0)