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 |