Use KioskBoard with Reactjs

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 install
• npm start
• Visit http://localhost:3000/

Other versions

• React.js
• Angular
• Vue.js

Questions? Join the chat

✳️ Modules

You can extend simple-keyboard's functionality with modules. Such as:

• Autocorrect
• Input Mask
• Key Navigation
• Swipe Keyboard

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…

View on GitHub

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 install
• npm start
• Visit http://localhost:3000/

Other versions

• Vanilla JS
• Angular
• Vue.js

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

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

yarn add kioskboard

npm

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…

View on GitHub

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;

Comments

[DeChamp]

very informative and great job on the writing. I enjoyed reading it.

[0xkoji]

Thank you!