react-transliterate

A React component and hook for phonetic transliteration. Type romanized text and choose from native-script suggestions powered by the Google Input Tools API.

Features

• 🌐 Supports 10+ Indian and world languages (Hindi, Bengali, Tamil, Telugu, Kannada, Malayalam, Marathi, Gujarati, Punjabi, Urdu, Arabic, …)
• ⌨️ Keyboard navigation (↑ / ↓ to move, Enter / Space to accept, Esc to dismiss)
• 🖱️ Mouse click to accept a suggestion
• 📝 Single-line <input> and multi-line <textarea> modes
• 💡 Fully typed TypeScript API
• 📦 Ships both ESM and CJS builds plus type declarations

Installation

npm install react-transliterate
# or
yarn add react-transliterate

Peer dependencies – React ≥ 16.8 and ReactDOM ≥ 16.8 must already be installed in your project.

Quick start

import React, { useState } from "react";
import { ReactTransliterate } from "react-transliterate";

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

  return (
    <ReactTransliterate
      lang="hi"           // target language (default: "hi" = Hindi)
      value={text}
      onChangeText={setText}
      placeholder="Type in English…"
    />
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | lang | Language | "hi" | BCP 47-style language code for the target script | | value | string | – | Controlled value (required) | | onChangeText | (value: string) => void | – | Called on every value change (required) | | maxOptions | number | 5 | Max number of suggestions to fetch | | offsetX | number | 0 | Horizontal pixel offset for the suggestion list | | offsetY | number | 8 | Vertical pixel offset for the suggestion list | | enabled | boolean | true | Toggle transliteration on/off | | multiline | boolean | false | Render a <textarea> instead of <input> | | containerClassName | string | – | Extra CSS class on the suggestion list | | containerStyles | CSSProperties | – | Extra inline styles on the suggestion list | | activeItemClassName | string | – | Extra CSS class on the highlighted suggestion | | activeItemStyles | CSSProperties | – | Extra inline styles on the highlighted suggestion |

All other props (e.g. id, className, style, placeholder, autoComplete) are forwarded to the underlying <input> / <textarea> element.

Supported languages

| Code | Language | |---|---| | hi | Hindi | | bn | Bengali | | ta | Tamil | | te | Telugu | | kn | Kannada | | ml | Malayalam | | mr | Marathi | | gu | Gujarati | | pa | Punjabi | | ur | Urdu | | ar | Arabic | | el | Greek | | ne | Nepali | | si | Sinhala |

Any language code accepted by Google Input Tools can also be passed as a plain string.

Hook API

The useTransliterate hook exposes the core state for building a custom UI:

import { useTransliterate } from "react-transliterate";

const {
  suggestions,          // string[]
  activeSuggestion,     // number
  setActiveSuggestion,  // Dispatch<SetStateAction<number>>
  clearSuggestions,     // () => void
  fetchSuggestionsForWord, // (word: string) => void
  loading,              // boolean
} = useTransliterate({ lang: "hi", maxOptions: 5, enabled: true });

Running the example

# 1. Build the library
npm install
npm run build

# 2. Run the example Vite app
cd example
npm install
npm run dev

Then open http://localhost:5173 in your browser.

Development

# Install dependencies
npm install

# Type-check
npm run lint

# Build (CJS + ESM + types)
npm run build

# Run tests
npm test

License

MIT © Vindago LLC