Documentation

Learn how to integrate BhaSha IME into your React applications, or use it standalone in any HTML page.

React Hooks

Flexible integration with `useBhaShaIME` and `useDirectInputTransliteration`.

React Components

Ready-to-use `BhaShaInput` and `BhaShaTextarea` components.

Injector Script

Use in any HTML page without a framework.

Installation

BhaSha IME is available as an npm package. Install it in your React project using your preferred package manager.

npm

npm install @bhashaime/core

Yarn

yarn add @bhashaime/core

Requirements

  • • React 16.8.0 or higher (hooks support required)
  • • React DOM 16.8.0 or higher
  • • TypeScript 4.0+ (optional, but recommended)

Peer Dependencies

BhaSha IME has the following peer dependencies that should already be installed in your React project:

"peerDependencies": {
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}

Verify Installation

After installation, verify that everything is working by importing the library:

import { useBhaShaIME, BhaShaInput, BhaShaTextarea } from '@bhashaime/core';

// If using TypeScript, you can also import types
import type { SupportedLanguage } from '@bhashaime/core';

Quick Start

Get up and running with BhaSha IME in just a few minutes. Here's the fastest way to add Indian language transliteration to your React app.

Step 1: Basic Usage

The simplest way to get started is with the BhaShaInput component:

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

function MyComponent() {
  return (
    <BhaShaInput
      language="gujarati"
      placeholder="Type in English..."
      showOutput={true}
    />
  );
}

Try it yourself:

Step 2: Using the Hook

For more control over the UI, use the useBhaShaIME hook:

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

function MyComponent() {
  const { input, output, setInput } = useBhaShaIME({
    language: 'hindi',
    autoTransliterate: true,
  });

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type in English..."
      />
      <div>Output: {output}</div>
    </div>
  );
}

Step 3: Language Switching

Easily switch between different Indian languages:

import { useBhaShaIME, SupportedLanguage } from '@bhashaime/core';

function MyComponent() {
  const { input, output, setInput, setLanguage, language } = useBhaShaIME({
    language: 'gujarati',
    autoTransliterate: true,
  });

  const languages: SupportedLanguage[] = ['gujarati', 'hindi'];

  return (
    <div>
      <select 
        value={language} 
        onChange={(e) => setLanguage(e.target.value as SupportedLanguage)}
      >
        {languages.map(lang => (
          <option key={lang} value={lang}>
            {lang.charAt(0).toUpperCase() + lang.slice(1)}
          </option>
        ))}
      </select>
      
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type in English..."
      />
      
      <div>Output: {output}</div>
    </div>
  );
}

Common Usage Patterns

  • • Use BhaShaInput for simple single-line inputs
  • • Use BhaShaTextarea for multi-line text areas
  • • Use useBhaShaIME hook for custom UI implementations
  • • Use BhaSha class directly for non-React applications

Next Steps

Ready to dive deeper? Check out:

← Back to HomeView on GitHub