cosmic-tamil-keyboard

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