react-transliterate
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    React Transliterate

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

    NPM

    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
      5, // number of suggestions to fetch
      false, // add the word as the last suggestion
      "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

    Install

    npm i react-transliterate

    DownloadsWeekly Downloads

    26

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    134 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar