React Virtual Keyboard

Virtual Keyboard

React Virtual Keyboard is a small library for react developers who they need a customizable virtual keyboard for their applications.

Issues & Questions

For reporting issues or asking questions please use the github issues or contact [email protected].

Getting Started

You can simply add this library to your react application using npm or yarn.

npm install react-virtual-keyboard-js

yarn add react-virtual-keyboard-js

How to use

After installing library, you can use VirtualKeyboard component in your application same as below:

import { VirtualKeyboard } from 'react-virtual-keyboard-js';

...
      <VirtualKeyboard
        className="virtualKeyboard"
        value={text}
        onChange={setText}
        shuffleOn={["charkey", "start"]}
        buttonProps={{
          className: "btn",
          activeClassName: "activeBtn",
        }}
        gap="10px"
      />
    </div>

Props

Prop	Options	Description
className	Optional, string	CSS class name to change keyboard pan
value	Required, string	State value of keyboard
onChange	Required, Function (value: string) => void	onChange method
shuffleOn	Optional, Array of start, charkey, space, clear, tab, backspace, key	If this array includes one of these options, character keys will be shuffled on that event. for example start option shuffles keys on mount, tab option shuffles keys when tab key is pressed and key option shuffles them on each button.
buttonProps	Optional, Object containing className and activeClassName	You can customize buttons based on your need using className. and add another style to shift button when it is pressed using activeClassName
gap	Optional, string or number	This prop let you change the gap among buttons
charKeys	Array of { c: string, s: string}	You will be able to change character keys of keyboard by providing an array of c as character and s as corresponding character which will be shown when shift is pressed. For example you can make Greek keyboard by providing an array of Greek alphabets