BhaShaInput Component

The `BhaShaInput` component is a ready-to-use, enhanced HTML input element with built-in transliteration capabilities. It's designed to be a drop-in replacement for the standard `` tag.

Basic Usage

To get started, simply import `BhaShaInput` and use it in your component.

import { BhaShaInput } from '@bhashaime/core';

function MyComponent() {
  return (
    <BhaShaInput
      language="gujarati"
      placeholder="Type here..."
    />
  );
}

Advanced Usage

The component can be customized with various props and can be controlled via a ref.

import React, { useState, useRef } from 'react';
import { BhaShaInput, BhaShaInputRef, SupportedLanguage } from '@bhashaime/core';

function AdvancedInput() {
  const [lang, setLang] = useState<SupportedLanguage>('gujarati');
  const inputRef = useRef<BhaShaInputRef>(null);

  const handleClear = () => {
    inputRef.current?.clear();
  };

  return (
    <div>
      <div className="flex space-x-2 mb-4">
        <button onClick={() => setLang('gujarati')}>Gujarati</button>
        <button onClick={() => setLang('hindi')}>Hindi</button>
      </div>
      <BhaShaInput
        ref={inputRef}
        language={lang}
        className="my-custom-input"
        outputClassName="my-custom-output"
        onOutputChange={(output) => console.log(output)}
      />
      <button onClick={handleClear} className="mt-2">
        Clear
      </button>
    </div>
  );
}

Props

The `BhaShaInput` component accepts all standard props for an `input` element, in addition to the options for the `useBhaShaIME` hook and some specific props listed below.