useDirectInputTransliteration Hook

The `useDirectInputTransliteration` hook is designed for simplicity. It directly hooks into an existing input or textarea element using a ref, automatically handling user input and transliteration without requiring you to manage state.

Basic Usage

import { useRef } from 'react';
import { useDirectInputTransliteration } from '@bhashaime/core';

function MyComponent() {
  const inputRef = useRef<HTMLInputElement>(null);

  useDirectInputTransliteration({
    ref: inputRef,
    language: 'gujarati',
  });

  return <input ref={inputRef} />;
}

Live Demo

Live Demo:

Advanced Usage

Customize the hook's behavior with the following options.

ref

A React ref pointing to the `HTMLInputElement` or `HTMLTextAreaElement` you want to attach the transliteration to.

Type: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
language

The language for transliteration. This can be dynamically changed.

Type: `SupportedLanguage`
initialRawValue

An initial English value for the input field. This will be transliterated on the initial render.

Type: `string` • Default: `''`
onTransliteration

Callback function that fires whenever a transliteration occurs. It receives both the original English input and the transliterated output.

Type: (e: { raw: string; converted: string }) => void