React Custom Virtual Keyboard

A simple, fully customizable, responsive and complete virtual keyboard component for integrate with React.

Peer Dependencies

For a good functionality of this package, the installation will need the following additional packages:

"react": "^16.8.6"
"lodash": "^4.17.15"

Installation

Use the package manager npm to install the keyboard:

npm install --save react-custom-virtual-keyboard

Usage

In general, the keyboard wait a target property, and this must be a DOM node element from the document. It's recommended to save this node for example in the state of you main component, and update this value in the focus (set the target) and blur (unset or null the target) events of your input fields.
The theme property is used to style your keyboard with one of the preset stylesheets, the available themes are:

• office (default)
• dark-office
• console
• glow-green
• glow-red
• glow-blue

There is so many use cases to cover with this package. One of this are a mobile-like behaviour, the keyboard is opened once you tap or click over an input element. if you unfocus (blur) the element, the keyboard must be hidded. In this case, you must use the following properties:

import VirtualKeyboard from 'react-custom-virtual-keyboard';
 
// ...
 
render() {
  return (
    // ...
    <VirtualKeyboard
      openAuto
      closeAuto
      target={this.state.YourElementTarget}
      theme={'console'}
    />
  );
}
 
// ...
 

Another way is to give to the user the possibility of choice where to show or hide the keyboard, but the event of the pressed key works only if the prop target is set:

import VirtualKeyboard from 'react-custom-virtual-keyboard';
 
// ...
 
render() {
  return (
    // ...
    <VirtualKeyboard
      withToggleButton
      target={this.state.YourElementTarget}
      theme={'console'}
    />
  );
}
 
// ...
 

Even you can combine the previous property to have a full use keyboard, but be careful, the closeAuto property doesn't work alone.

Know issues

Using in mobile sites, when you focus an input element, the default system keyboard is invoked, and there's not a default way to prevent this. There's a way to solve this issue but require to use read-only input components and use styles to indicate the currently focused element for the user. See this StackOverflow question for more details.

License

MIT