Use KioskBoard with Reactjs
Tags: typescript, softwarekeyboard, npm, react
Published: 2022-08-28 05:06:00

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
{% github hodgef/simple-keyboard %}


## react-simple-keyboard
{% github hodgef/react-simple-keyboard %}


## KioskBoard
{% github furcan/KioskBoard %}

If you focus on one of inputs, you will see a normal keyboard or numpad.

{% embed https://codesandbox.io/embed/kioskboard-test-17qcjq?fontsize=14&hidenavigation=1&theme=dark %}


`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.

```ts
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;
```