Akshar ✍️

A lightweight, zero-dependency React component library that adds phonetic transliteration features to your text inputs and textareas for Indic languages. It utilizes the Google Input Tools API, and includes a built-in CORS bypass mechanism and client-side caching.

Developed as a highly customizable, modern, and high-performance alternative to react-transliterate with full TypeScript support out of the box.

Features

• 🇮🇳 Indic Language Support: Easy phonetic transliteration for 12+ major Indic languages (Hindi, Bengali, Marathi, Tamil, Telugu, Gujarati, Kannada, Malayalam, Punjabi, Urdu, Sanskrit, and Nepali).
• 🧩 Zero External Dependencies: The caret coordinates calculation and API interactions are written from scratch in pure TypeScript to avoid package bloat.
• 🎨 Premium Glassmorphic UI: Beautiful, dark-mode compatible suggestion menu styling out of the box (automatically injected into JS).
• 🚀 Performance Optimized: Features client-side in-memory caching of API responses and input debouncing to ensure typing remains fluid.
• ⚙️ Unified Render Wrapper: Comes with standard components (TransliterateInput, TransliterateTextarea) and a generic <Transliterate> wrapper to wrap any custom component (e.g., custom Tailwind UI, Material UI inputs).
• 🌐 CORS Bypass & Proxies: Uses JSONP to bypass browser CORS limitations by default, and allows routing requests through custom server proxies if desired.

Installation

Install via npm:

npm install react-akshar

Or via yarn:

yarn add react-akshar

Quick Start

1. Simple Input Component

import React, { useState } from "react";
import { TransliterateInput } from "react-akshar";

export default function MyForm() {
  const [value, setValue] = useState("");

  return (
    <div>
      <label>Type in Hindi (phonetic):</label>
      <TransliterateInput
        value={value}
        onChangeText={setValue}
        lang="hi"
        placeholder="Type here..."
      />
    </div>
  );
}

2. Multi-line Textarea Component

import React, { useState } from "react";
import { TransliterateTextarea } from "react-akshar";

export default function CommentBox() {
  const [text, setText] = useState("");

  return (
    <TransliterateTextarea
      value={text}
      onChangeText={setText}
      lang="ta" // Tamil
      placeholder="கருத்துகளை எழுதவும்..."
    />
  );
}

Advanced Usage

Custom Component Rendering

If you want to use your own styled component (for example, a Tailwind CSS input or a design system component), use the base <Transliterate> component and pass a custom render function to the renderComponent prop:

import React, { useState } from "react";
import { Transliterate } from "react-akshar";

export default function CustomForm() {
  const [value, setValue] = useState("");

  return (
    <Transliterate
      value={value}
      onChangeText={setValue}
      lang="mr" // Marathi
      renderComponent={(props) => (
        <input
          {...props}
          className="w-full px-4 py-3 rounded-lg border-2 border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition"
          placeholder="आपले नाव लिहा..."
        />
      )}
    />
  );
}

API Properties

All component exports (Transliterate, TransliterateInput, TransliterateTextarea) support the following props:

| Prop | Type | Default | Description | |---|---|---|---| | value | string | Required | The state value of the input. | | onChangeText | (value: string) => void | undefined | Callback invoked with the new string value after transliteration or typing. | | onChange | (event: ChangeEvent) => void | undefined | Standard React change event callback. | | lang | string | Required | The target language code (e.g. "hi", "bn", "ta") or full Google ITC code. | | maxSuggestions | number | 5 | Maximum number of options to show in the dropdown. | | triggerKeys | string[] | [" ", "Enter"] | Keyboard keys that trigger selection of the active suggestions. | | customProxy | string | undefined | Custom proxy API URL to fetch suggestions from (supports {text}, {itc}, {num}, {cb} templates). | | enabled | boolean | true | Set to false to disable transliteration and use standard input behaviors. | | containerClassName | string | "" | CSS class name for the parent wrapper container. | | suggestionsContainerClassName | string | "" | CSS class name for the floating suggestions box. | | suggestionItemClassName | string | "" | CSS class name for each suggestion item. | | activeSuggestionItemClassName | string | "" | CSS class name applied to the active/selected suggestion item. |

Supported Languages

| Language Code | Name | Native Script Name | |---|---|---| | hi | Hindi | हिन्दी | | bn | Bengali | বাংলা | | mr | Marathi | मराठी | | ta | Tamil | தமிழ் | | te | Telugu | తెలుగు | | gu | Gujarati | ગુજરાતી | | kn | Kannada | ಕನ್ನಡ | | ml | Malayalam | മലയാളം | | pa | Punjabi | ਪੰਜਾਬੀ | | ur | Urdu | اردو | | sa | Sanskrit | संस्कृतम् | | ne | Nepali | नेपाली | | or | Odia | ଓଡ଼ିଆ | | as | Assamese | অসমীয়া |

License

MIT © Sarthak