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)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more