##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 */}
<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
Image :