React-virtual-keyboard-js NPM

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 skarimi68@gmail.com.

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

react virtual keyboard shuffle

@everything-registry/sub-chunk-2622

0.0.2

11 months ago

0.0.1

11 months ago