Installation
npm install cosmic-tamil-keyboard
Example function component :
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)}
onFocus={(e)=>keyboardRef.current.onfocus(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} />
</>
);
}
Example class component :
import React, { createRef } from 'react';
import { Input } from 'antd';
import { TamilKeybord } from 'cosmic-tamil-keyboard'
class Keyboad extends React.Component {
constructor() {
super()
this.state = {
visible: true,
inputs: ""
}
}
inputRef = createRef();
keyboardRef = createRef();
handleKeyboardChange = (data) => {
this.setState((inputData) => ({ ...inputData, inputs: data, }))
}
render() {
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) => this.keyboardRef.current.handlePaste(e)}
onKeyPress={(e) => this.keyboardRef.current.keypress(e)}
onKeyDown={(e) => this.keyboardRef.current.keyup(e)}
onCut={e => this.keyboardRef.current.handleCut(e)}
onFocus={(e) => this.keyboardRef.current.onfocus(e)}
value={this.state.inputs}
ref={this.inputRef} />
<TamilKeybord
keysound={true}
visible={this.state.visible}
// To 'set' keyboard input values to above input field
keydatavalue={this.handleKeyboardChange }
ref={this.keyboardRef}
// 'inputid' same as above input field 'id'
inputid={"virtualkeyID"}
// 'inputref' same as above input field 'ref'
inputref={this.inputRef}
/>
</>
);
}
}
export default Keyboad
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