Skip to content

Latest commit

 

History

History
61 lines (46 loc) · 4.45 KB

README.md

File metadata and controls

61 lines (46 loc) · 4.45 KB
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