input-tool-helper

input-tool-helper is a JavaScript package that provides transliteration functionality, specifically allowing the transformation of user input from one script to another. It leverages Google's transliteration API for dynamic transliteration suggestions as the user types, which can be useful for creating language input tools.

Installation

To install the input-tool-helper package, use npm or yarn:

    npm install input-tool-helper
  

or

    yarn add input-tool-helper
  

Usage

Here is a basic example of how to use input-tool-helper to integrate transliteration functionality in a React component:

Example

    
      import { useState } from "react";
      import googleTransliterate from "input-tool-helper";
      
      export default function Dashboard() {
        let inputLanguage = "ne-t-i0-und"; // Example: Nepali transliteration
        let maxResult = 8; // Maximum number of transliteration suggestions
        let request = new XMLHttpRequest();
      
        const [inputValue, setInputValue] = useState("");
        const [suggestions, setSuggestions] = useState([]);
          
        const onChangeHandler = (event: any) => {
          setInputValue(event.target.value);
          googleTransliterate(request, event.target.value, inputLanguage, maxResult)
            .then(function (response: string[][]) {
              const suggestionList = response.map((item: string[]) => item[0]);
              setSuggestions(suggestionList);
            })
            .catch((error: any) => {
              console.error("Error fetching transliterated data:", error);
            });
        };
          
        const onSuggestionClick = (suggestion: string, event: any) => {
          event.preventDefault();
          setInputValue(suggestion);
          setSuggestions([]);
          document.getElementById("input-field")?.focus();
        };
        return (
          

            
            {suggestions.length > 0 && (
              

                {suggestions.map((suggestion, index) => (
                  
 onSuggestionClick(suggestion, event)}
                    style={{
                      padding: "8px",
                      margin: 0,
                      cursor: "pointer",
                      borderBottom: "1px solid #eee",
                      backgroundColor: "#fff",
                      transition: "background-color 0.3s ease",
                    }}
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.backgroundColor = "#f0f0f0")
                    }
                    onMouseLeave={(e) =>
                      (e.currentTarget.style.backgroundColor = "#fff")
                    }
                  >
                    {suggestion}
                  
                ))}
              
            )}
          
        );
      }
    
  

Parameters

• inputLanguage: Specifies the language and transliteration script. This is a language tag (e.g., ne-t-i0-und for Nepali).
• maxResult: The maximum number of transliteration suggestions to display.
• request: An XMLHttpRequest object used by the Google Transliteration API for handling requests and responses.

Transliterate Function

    
      googleTransliterate(request, text, inputLanguage, maxResult)
    
  

• request: The XMLHttpRequest object to make the request.
• text: The string the user types, which will be transliterated.
• inputLanguage: A string that specifies the language code for the target language (e.g., Hindi, Nepali).
• maxResult: Maximum number of transliteration suggestions to fetch.

Handling the Suggestions

The package provides transliteration suggestions as a list of arrays, where each inner array contains possible transliterations for a specific input. You can process these to display the suggestions and allow users to select from them.

Error Handling

In case of an error while fetching transliteration suggestions, ensure proper error handling to avoid breaking the user experience:

    
      .catch((error) => {
        console.error("Error fetching transliterated data:", error);
      });
    
  

Language	Code
Amharic	am-t-i0-und
Arabic	ar-t-i0-und
Bengali	bn-t-i0-und
Chinese (Hong Kong)	yue-hant-t-i0-und
Chinese (Simplified, China)	zh-t-i0-pinyin
Chinese (Traditional, Taiwan)	zh-hant-t-i0-und
Greek	el-t-i0-und
Gujarati	gu-t-i0-und
Hindi	hi-t-i0-und
Kannada	kn-t-i0-und
Malayalam	ml-t-i0-und
Marathi	mr-t-i0-und
Nepali	ne-t-i0-und
Oriya	or-t-i0-und
Persian	fa-t-i0-und
Punjabi	pu-t-i0-und
Russian	ru-t-i0-und
Sanskrit	sa-t-i0-und
Serbian	sr-t-i0-und
Sinhalese	si-t-i0-und
Tamil	ta-t-i0-und
Telugu	te-t-i0-und
Thai	th-t-i0-und
Tigrinya	ti-t-i0-und
Urdu	ur-t-i0-und