react-balochi-input

Overview

The Balochi Input React Component is a specialized React component designed to seamlessly integrate Balochi language input functionality into your web applications. This component empowers users to input Balochi text using their standard keyboard, ensuring a user-friendly experience.

Features

• Real-time conversion of English characters to their corresponding Balochi script.
• Support for both regular and shift modes to access special characters.
• Highly customizable, facilitating seamless integration into your existing projects.

Functionality

The component dynamically converts English characters to their corresponding Balochi counterparts, ensuring a seamless transition between languages for users.

Installation

To integrate the Balochi Input React Component into your project, simply execute the following command:

npm install react-balochi-input

Usage

import React, {useState} from 'react';
import BalochiInput from 'react-balochi-input';

const YourComponent = () => {
  const [inputValue, setInputValue] = useState('Ab')

  const handleBalochiInputChange = (balochiText) => {
    setInputValue(balochi)
    console.log(balochiText);
  };

  return (
    <BalochiInput
      className="custom-balochi-input"
      value={inputValue} // will show آب
      onChange={handleBalochiInputChange}
      placeholder="Start typing.."
    />
  );
};

export default YourComponent;

Props

• className (string): Custom CSS class for styling.
• value (string): Initial value for the input field.
• onChange (function): Callback function triggered on input change, providing the Balochi text.
• placeholder (string): Placeholder text for the input field.
• allowSwitching (boolean): Enable or disable dynamic switching between English and Balochi modes using Ctrl + Space.
• custom props : Accepts custom props for further customization.

Development

• dev: Start the development server using Vite.
• build: Build the project using Vite.
• test: Run tests using Vitest.
• watch: Watch for changes and re-run tests using Vitest.
• coverage: Run tests with coverage using Vitest.

To get started, you can run:

npm run dev

Contributing

Contributions from the community are welcome! If you'd like to contribute to this project, here's how you can help:

1. Fork the repository and clone it locally.
2. Create a new branch for your contribution.
3. Make your changes and ensure the code is well-documented.
4. Test thoroughly to make sure it works as expected.
5. Commit your changes and push them to your fork.
6. Create a pull request, describing your changes in detail.

Thank you for considering contributing to our project!

License

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