Recently I researched about Virtual Keyboard for reactjs app.
I could find a couple of libraries.
In this post, I will introduce how to use KioskBoard with reactjs because the most popular one, simple-keyboard has derivative lib which is called react-simple-keyboard and it offers a lot of sample codes on codesandbox. If you are interested in them, I highly recommend you to check out simple-keyboard documentation (https://hodgef.com/simple-keyboard/getting-started/)
Actually, our team decided to use react-simple-keyboard for the project lol.
simple-keyboard
hodgef
/
simple-keyboard
Javascript Virtual Keyboard - Customizable, responsive and lightweight
Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.
๐ Demo
Demo Showcase (Vanilla, Angular, React, Vue)
๐ฆ Installation & Usage
You can use simple-keyboard as a <script> tag from a CDN, or install it from npm.
Check out the Getting Started docs to begin.
๐ Documentation
Check out the simple-keyboard documentation site.
Feel free to browse the Questions & Answers (FAQ) page for common use-cases.
To run demo on your own computer
- Clone this repository
npm installnpm start- Visit http://localhost:3000/
Other versions
Questions? Join the chat
โณ๏ธ Modules
You can extend simple-keyboard's functionality with modules. Such as:
Want to create your own module? Check out the Modules page for instructions.
๐ฏ Compatibility
- Internet Explorer 11
- Edge (Spartan) 16+
- Edge (Anaheim/Edge Chromium) 79+
- Chrome 49+
- Safari 9+
- Firefox 57+
- iOS 9+
Note: If youโฆ
react-simple-keyboard
hodgef
/
react-simple-keyboard
React Virtual Keyboard - Customizable, responsive and lightweight
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 installnpm 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
KioskBoard
furcan
/
KioskBoard
KioskBoard - A pure JavaScript library for using virtual keyboards.
KioskBoard - Virtual Keyboard
A pure JavaScript library for using virtual keyboards.
Current Version
2.3.0 *
Documentation and Demo
https://furcan.github.io/KioskBoard/
Browser Compatibility
Chrome || Firefox || Safari || Opera || Edge || IE 11
(A) Install & Import
Install
yarn add kioskboard
npm i kioskboard
Import
import KioskBoard from 'kioskboard';
(B) Adding to an HTML Document
CSS and JS
<link rel="stylesheet" href="dist/kioskboard-2.3.0.min.css" />
<script src="dist/kioskboard-2.3.0.min.js"></script>
Or only JS (All in One - Internal CSS)
<script src="dist/kioskboard-aio-2.3.0.min.js"></script>
Keyboard Types and Themes
3 types of keyboards can be used: all, keyboard, and numpad.
5 types of themes can be used. light, dark, flat, material, and oldschool.
Run / Initialize
KioskBoard Virtual Keyboard can be used with the inputโฆ
If you focus on one of inputs, you will see a normal keyboard or numpad.
App.tsx
The code is simple. Pass useRef to <input /> and check ref.current. If ref.current isn't null, call KioskBoard.run.
You can check the options in GitHub repo.
import { useRef, useEffect } from "react";
import "./styles.css";
import KioskBoard from "kioskboard";
function App() {
const keyboardRef = useRef(null);
const numpadRef = useRef(null);
useEffect(() => {
if (keyboardRef.current) {
KioskBoard.run(keyboardRef.current, {
language: "en",
theme: "light",
keysArrayOfObjects: [
{
"0": "Q",
"1": "W",
"2": "E",
"3": "R",
"4": "T",
"5": "Y",
"6": "U",
"7": "I",
"8": "O",
"9": "P"
},
{
"0": "A",
"1": "S",
"2": "D",
"3": "F",
"4": "G",
"5": "H",
"6": "J",
"7": "K",
"8": "L"
},
{
"0": "Z",
"1": "X",
"2": "C",
"3": "V",
"4": "B",
"5": "N",
"6": "M"
}
]
});
}
}, [keyboardRef]);
useEffect(() => {
if (numpadRef.current) {
KioskBoard.run(numpadRef.current, {
theme: "light",
keysArrayOfObjects: [
{
"0": "7",
"1": "8",
"2": "9"
},
{
"0": "4",
"1": "5",
"2": "6"
},
{
"0": "1",
"1": "2",
"2": "3"
},
{
"0": "0",
"1": "."
}
]
});
}
}, [numpadRef]);
return (
<div className="App">
<input
className="inputFromKey"
ref={keyboardRef}
type="text"
data-kioskboard-type="keyboard"
placeholder="normal keyboard"
/>
<input
className="inputFromKey"
ref={numpadRef}
type="text"
data-kioskboard-type="numpad"
placeholder="numpad"
/>
</div>
);
}
export default App;
Oldest comments (2)
very informative and great job on the writing. I enjoyed reading it.
Thank you!