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