Virtual Keyboard

This is a hookable virtual keyboard which can be used in react applications.

Documentation

To use it you can just import it

import { VirtualKeyboard } from 'virtual-keyboard';

<VirtualKeyboard
  show={true}
  output={(key) => console.log(key)}
  onClose={() => {}}
  layoutName="default"
  changeButtonsDisplay={{
    '{bksp}': 'Backspace',
    '{enter}': 'Enter',
    '{space}': 'Space',
  }}
  anchor={document.querySelector('input')}
  ref={someRef}
/>

Props the keyboard can be passed to.

1. show This prop is used to show keyboard. It must be a boolean state. Usage:

const [showKeyboard, setShowKeyboard] = useState(false);
 <VirtualKeyboard
    show={showKeyboard}
    onClose={handleclose}
    anchor={
            "horizontal":350,
            "vertical": 200,
        }
 />

2. output This function captures the output from the keyboard. It needs to be a function. Usage:

const onKeyPress = (btn) => {
    console.log(btn)
}

 <VirtualKeyboard
    output={onKeyPress}
/>

3. onClose This prop is used to hide/close the keyboard. You need to pass a function which manipulates the same state. Usage:

const [showKeyboard, setShowKeyboard] = useState(false);
 
 const handleclose = () => {
    setShowKeyboard(false);
  }

 <VirtualKeyboard
    onClose={handleclose}
 />

4. layoutName The layout you want, default or Upper. Usage:

<VirtualKeyboard
        layoutName="default"
/>

5. changeButtonsDisplay If you want to show certain buttons in a more user friendly way. It need to be an object as shown in the example.

<VirtualKeyboard
        changeButtonsDisplay={{'bksp': 'backspace',
                                'enter': '< enter',
                                '@': 'at',
                                "space":"spacebar"
                              }}
  />

6. anchor The position where the keyboard will show up. It can be numbers or pixels. Usage

<VirtualKeyboard
        anchor={
            "horizontal":350,
            "vertical": 200,
        }
  />

or

anchor={document.querySelector('input')}

7. title: If user wants to show any title for the keyboard Usage

<VirtualKeyboard
  title={My Keyboard}
/>

Installation

npm install @sayantan2512/react-virtual-keyboard

Contact

For feature requests, bug reports, or any other inquiries regarding this project, please open an issue on the official GitHub repository:

Issues

We appreciate your feedback and will review all submissions diligently.