Customize react-simple-keyboard layout

hodgef / react-simple-keyboard

React Virtual Keyboard - Customizable, responsive and lightweight

simple-keyboard: Javscript Virtual Keyboard

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

View on GitHub

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

[default]

[symbols]

[numbers]