This is a hookable virtual keyboard which can be used in react applications.
Hello, My name is Sayantan Basu. I am a new software developer. After I saw a lack of virtual keyboards for react, I decided to take a shot and create a npm package myself.
To use it you can just import it
import VirtualKeyboard from 'virtual-keyboard';
function App(){
const [showKeyboard, setShowKeyboard] = useState(false);
const handleClick = () => {
setShowKeyboard(true);
}
const handleclose = () => {
setShowKeyboard(false);
}
return (
<div className="App">
<div onclick={handleClick}>
<VirtualKeyboard
show={showKeyboard}
onClose={handleclose}
layoutName={layoutName}
output={onKeyPress}
/>
</div>
</div>
);
}Props the keyboard can be passed to.
- 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,
}
/>- 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}
/>- 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}
/>- layoutName The layout you want, default or Upper. Usage:
<VirtualKeyboard
layoutName="default"
/>- 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"
}}
/>- anchor The position where the keyboard will show up. It can be numbers or pixels. Usage
<VirtualKeyboard
anchor={
"horizontal":350,
"vertical": 200,
}
/>