Skip to content

sajjadkarimi/react-virtual-keyboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published