###Installation
npm install cosmic-tamil-keyboard
###Example
import { useRef, useState } from 'react';
import { Input } from 'antd';
import TamilKeybord from "cosmic-tamil-keyboard";
const App =() =>{
const [data, setdata] = useState({
visible: true,
inputs: ""
});
const inputRef = useRef();
const keyboardRef = useRef();
const handleKeyboardChange = (data) => {
setdata((inputData) => ({ ...inputData, inputs: data, }))
};
return (
<>
{/* Pass all the input field properties same as example to get expected output. This keyboard only applicable for antd input.*/}
<Input
type="text"
id="virtualkeyID"
onPaste={(e) => keyboardRef.current.handlePaste(e)}
onKeyPress={(e) => keyboardRef.current.keypress(e)}
onKeyDown={(e) => keyboardRef.current.keyup(e)}
onCut={e => keyboardRef.current.handleCut(e)}
value={data.inputs}
ref={inputRef} />
<TamilKeybord keysound={true}
visible={data.visible}
// To 'set' keyboard input values to above input field
keydatavalue={handleKeyboardChange}
ref={keyboardRef}
// 'inputid' same as above input field 'id'
inputid={"virtualkeyID"}
// 'inputref' same as above input field 'ref'
inputref={inputRef} />
</>
);
}
###Features
- Sound effects
- System keyboard control
- Draggable
- Customized color change
###API
Properties (All are mandatory) | Description | Type | Default |
---|
visible | show & hide | boolean | true |
keydatavalue | set user keyboard input values to targeted input field | Input change function() | empty |
keysound | sound enable/disable | boolean | true |
inputid | set inputid value same as text field id | string | any string |
inputref | set inputref value same as text field ref | any | createRef()/useRef() |
###Images