Customize react-simple-keyboard layout

0xkoji - Jun 5 '23 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player