React Transliterate

Transliteration component for React with support for over 30 languages. Uses API from Google Input Tools

Demo

See Demo

Install

npm install --save react-transliterate

OR

yarn add react-transliterate

Usage

Basic example

import React, { useState } from "react";

import { ReactTransliterate } from "react-transliterate";
import "react-transliterate/dist/index.css";

const App = () => {
  const [text, setText] = useState("");

  return (
    <ReactTransliterate
      value={text}
      onChangeText={(text) => {
        setText(text);
      }}
      lang="hi"
    />
  );
};

export default App;

With custom component

import React, { useState } from "react";

import { ReactTransliterate } from "react-transliterate";
import "react-transliterate/dist/index.css";

const App = () => {
  const [text, setText] = useState("");

  return (
    <ReactTransliterate
      renderComponent={(props) => <textarea {...props} />}
      value={text}
      onChangeText={(text) => {
        setText(text);
      }}
      lang="hi"
    />
  );
};

export default App;

Usage with TypeScript

import React, { useState } from "react";

import { ReactTransliterate, Language } from "react-transliterate";
import "react-transliterate/dist/index.css";

const App = () => {
  const [text, setText] = useState("");
  const [lang, setLang] = useState<Language>("hi");

  return (
    <ReactTransliterate
      renderComponent={(props) => <textarea {...props} />}
      value={text}
      onChangeText={(text) => {
        setText(text);
      }}
      lang={lang}
    />
  );
};

export default App;

With material ui

import React, { useState } from "react";

import { ReactTransliterate, Language } from "react-transliterate";
import "react-transliterate/dist/index.css";

import Input from "@material-ui/core/Input";

const App = () => {
  const [text, setText] = useState("");
  const [lang, setLang] = useState<Language>("hi");

  return (
    <ReactTransliterate
      renderComponent={(props) => {
        const inputRef = props.ref;
        delete props["ref"];
        return <Input {...props} inputRef={inputRef} />;
      }}
      value={text}
      onChangeText={(text) => {
        setText(text);
      }}
      lang={lang}
    />
  );
};

export default App;

Custom trigger keys

Keys which when pressed, input the current selection to the textbox

React Transliterate uses the event.keycode property to detect keys. Here are some predefined keys you can use. Or, you can enter the integer codes for any other key you'd like to use as the trigger

import React, { useState } from "react";

import { ReactTransliterate, TriggerKeys } from "react-transliterate";
import "react-transliterate/dist/index.css";

import Input from "@material-ui/core/Input";

const App = () => {
  const [text, setText] = useState("");

  return (
    <ReactTransliterate
      value={text}
      onChangeText={(text) => {
        setText(text);
      }}
      lang="hi"
      triggerKeys={[
        TriggerKeys.KEY_RETURN,
        TriggerKeys.KEY_ENTER,
        TriggerKeys.KEY_SPACE,
        TriggerKeys.KEY_TAB,
      ]}
    />
  );
};

export default App;

Get transliteration suggestions

import { getTransliterateSuggestions } from "react-transliterate";

const data = await getTransliterateSuggestions(
  word, // word to fetch suggestions for
  {
    numOptions: 5, // number of suggestions to fetch
    showCurrentWordAsLastSuggestion: true, // add the word as the last suggestion
    lang: "hi", // target language
  },
);

For a full example, take a look at the example folder

Props

Prop	Required?	Default	Description
onChangeText	Yes		Listener for the current value from the component. (text: string) => void
value	Yes		value prop to pass to the component
enabled		true	Control whether suggestions should be shown
renderComponent		(props) => <input {...props} />	Component to render. You can pass components from your component library as this prop
lang		hi	Language you want to transliterate. See the following section for language codes
maxOptions		5	Maximum number of suggestions to show in helper
offsetY		0	Extra space between the top of the helper and bottom of the caret
offsetX		0	Extra space between the caret and left of the helper
containerClassName		empty string	Classname passed to the container of the component
containerStyles		{}	CSS styles object passed to the container
activeItemStyles		{}	CSS styles object passed to the active item <li> tag
hideSuggestionBoxOnMobileDevices		false	Should the suggestions be visible on mobile devices since keyboards like Gboard and Swiftkey support typing in multiple languages
hideSuggestionBoxBreakpoint		450	type: number. To be used when hideSuggestionBoxOnMobileDevices is true. Suggestion box will not be shown below this device width
triggerKeys		KEY_SPACE, KEY_ENTER, KEY_TAB, KEY_RETURN	Keys which when pressed, input the current selection to the textbox
insertCurrentSelectionOnBlur		true	Should the current selection be inserted when blur event occurs
showCurrentWordAsLastSuggestion		true	Show current input as the last option in the suggestion box

Supported Languages

Language	Code
Amharic	am
Arabic	ar
Bangla	bn
Belarusian	be
Bulgarian	bg
Chinese (Hong Kong)	yue-hant
Chinese (Simplified)	zh
Chinese (Traditional)	zh-hant
French	fr
German	de
Greek	el
Gujarati	gu
Hebrew	he
Hindi	hi
Italian	it
Japanese	ja
Kannada	kn
Malayalam	ml
Marathi	mr
Nepali	ne
Odia	or
Persian	fa
Portuguese (Brazil)	pt
Punjabi	pa
Russian	ru
Sanskrit	sa
Serbian	sr
Sinhala	si
Spanish	es
Tamil	ta
Telugu	te
Tigrinya	ti
Ukrainian	uk
Urdu	ur
Vietnamese	vi

License

MIT © burhanuday