cosmic-tamil-keyboard v1.4.30
Installation
npm install cosmic-tamil-keyboard
Example function component :
import { useRef, useState } from 'react';
import { Input } from 'antd';
import TamilKeyboard 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, }))
};
const handleEnterClick=(key)=>{
console.log(key,'clicked');
}
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),
// multiple un used keyboard hideing(textbox id passing for array in the format)
keyboardRef.current.anotherKeyBoardHide(["virtualkeyID1","virtualkeyID2","virtualkeyID3"])]}
value={data.inputs}
ref={inputRef} />
<TamilKeyboard 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"}
handleEnterClick={handleEnterClick} // if you use enter handlecontroller
// 'inputref' same as above input field 'ref'
// inputType={"textArea"} if you give textArear provide this
inputref={inputRef} />
<button onClick={(e)=>keyboardRef.current.allowclear(e)}>allowclear</button>
</>
);
}
Example class component :
import React, { createRef } from 'react';
import { Input } from 'antd';
import { TamilKeyboard } 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, }))
}
handleEnterClick=(key)=>{
console.log(key,'clicked');
}
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),this.keyboardRef.current.anotherKeyBoardHide(["virtualkeyID1","virtualkeyID2","virtualkeyID3"])]}
value={this.state.inputs}
ref={this.inputRef} />
<TamilKeyboard
keysound={true}
visible={this.state.visible}
// To 'set' keyboard input values to above input field
keydatavalue={this.handleKeyboardChange }
ref={this.keyboardRef}
handleEnterClick={handleEnterClick} // if you use enter handlecontroller
// 'inputid' same as above input field 'id'
inputid={"virtualkeyID"}
// 'inputref' same as above input field 'ref'
inputref={this.inputRef}
/>
<button onClick={(e)=>this.keyboardRef.current.allowclear(e)}>allowclear</button>
</>
);
}
}
export default Keyboad
Features
- Sound effects
- System keyboard control
- Draggable
- Customized color change
- Touch based control
- Allow clear function
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
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago