DEV Community

0xkoji
0xkoji

Posted on

Customize react-simple-keyboard layout

GitHub logo hodgef / react-simple-keyboard

React Virtual Keyboard - Customizable, responsive and lightweight

simple-keyboard: Javscript Virtual Keyboard
Virtual Keyboard for React. Customizable, responsive and lightweight.

npm version MIT license Build Status Publish Status Mirroring

🚀 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

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

[default]
Image description

[symbols]
Image description

[numbers]
Image description

Top comments (0)