BhaShaTextarea Component

The `BhaShaTextarea` component is a multi-line textarea with built-in transliteration support, perfect for forms, comments, or any place you need rich text input.

Basic Usage

Use it like a standard textarea, with the addition of the `language` prop.

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

function MyComponent() {
  return (
    <BhaShaTextarea
      language="hindi"
      placeholder="Type your comment here..."
      rows={5}
    />
  );
}

Advanced Usage

Customize and control the `BhaShaTextarea` with various props and a ref.

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

function AdvancedTextarea() {
  const [lang, setLang] = useState<SupportedLanguage>('gujarati');
  const textareaRef = useRef<BhaShaTextareaRef>(null);

  const handleFocus = () => {
    textareaRef.current?.focus();
  };

  return (
    <div>
      <div className="flex space-x-2 mb-4">
        <button onClick={() => setLang('gujarati')}>Gujarati</button>
        <button onClick={() => setLang('hindi')}>Hindi</button>
      </div>
      <BhaShaTextarea
        ref={textareaRef}
        language={lang}
        className="my-custom-textarea"
        rows={6}
        onOutputChange={(output) => console.log('Transliterated:', output)}
      />
      <button onClick={handleFocus} className="mt-2">
        Focus Textarea
      </button>
    </div>
  );
}

Props

The `BhaShaTextarea` component accepts all standard props for a `textarea` element, in addition to the options for the `useBhaShaIME` hook.