JSPM – cosmic-tamil-keyboard@1.0.27

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cosmic-tamil-keyboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, }))
  };
  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"}
        // 'inputref' same as above input field 'ref'
        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, }))
  }
  
  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}
          // '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()

cosmic-tamil-keyboard