A React library for easily handling Thaana input in forms, currently supporting <input>, <textarea>, and form wrapper for grouped inputs.

• Based on thaana-keyboard by aharen:
  • Provides mapping of Latin characters to Thaana characters.
  • Supports special characters and ensures accurate Thaana input.
• Lightweight and easy to integrate into any React project.
• Automatic Thaana input handling for individual fields and entire forms:
  • <ThaanaInput>: Seamless single-line Thaana input.
  • <ThaanaTextarea>: Multi-line Thaana text input.
  • <ThaanaFormWrapper>: Automatically applies Thaana input behavior to all fields in a form.

1. Individual Controls:

   • <ThaanaInput>: Provides seamless Thaana input for single-line fields.
   • <ThaanaTextarea>: Supports Thaana input for multi-line fields.

2. Form Grouping:

   • <ThaanaFormWrapper>:
     • Automatically applies dir="rtl" and character mapping for all child <input> and <textarea> fields.
     • Simplifies form handling by centralizing onChange for grouped inputs.
     • Dynamically supports fields added or removed from the DOM.

3. Thaana Mapping:

   • Supports Latin-to-Thaana character mapping out of the box.
   • Handles special characters (e.g., ،, ؟, ؛) for Thaana input.

Install the library using npm or yarn:

npm install react-thaana-controls
# or
yarn add react-thaana-controls

import React, { useState } from 'react';
import { ThaanaInput } from 'react-thaana-controls';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <div>
      <h1>Thaana Input Example</h1>
      <ThaanaInput value={value} onChange={setValue} placeholder="ތާނަ" />
      <p>Current Value: {value}</p>
    </div>
  );
};

export default App;

The ThaanaTextarea component provides Thaana support for multi-line text inputs.

import React, { useState } from 'react';
import { ThaanaTextarea } from 'react-thaana-controls';

const App = () => {
  const [text, setText] = useState('');

  return (
    <div>
      <h1>Thaana Textarea Example</h1>
      <ThaanaTextarea
        value={text}
        onChange={setText}
        placeholder="ތާނަ ޓެކްސްޓްއޭރިޔާ"
      />
      <p>Current Value:</p>
      <pre>{text}</pre>
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { ThaanaFormWrapper } from 'react-thaana-controls';

const App = () => {
  const [formData, setFormData] = useState({});

  return (
    <div>
      <h1>Thaana Form Example</h1>
      <ThaanaFormWrapper onChange={data => setFormData(data)}>
        <input name="firstName" placeholder="ނަން" />
        <textarea name="address" placeholder="ހުރިހާބު" />
      </ThaanaFormWrapper>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
};

export default App;

• npm start: Starts the development server with live reload.
• npm run build: Builds the library for production.
• npm run test: Runs the test suite.

To test the library, run:

npm test

Contributions are welcome! Feel free to submit issues and pull requests on the GitHub repository.

This project is licensed under the MIT License. See the LICENSE file for details.