react-localized-input

A simple and customizable React input component designed to validate user input based on the selected language or script. This library helps ensure that users input valid characters according to specific languages such as Katakana, Hiragana, and more.

Features

• Language-specific validation: Provides built-in support for various languages and scripts (e.g., Japanese Katakana, Hiragana, Alphanumeric).
• Customizable validation logic: Allows you to define custom validation functions based on your application's requirements.
• Easy to integrate: Simple API for integrating into your React forms and applications.

Installation

To install the library, you can use either npm or yarn.

Using npm:

npm install react-localized-input

Using yarn:

yarn add react-localized-input

Usage

Once installed, you can start using the InputComponent for your form fields that require language-specific validation. Below is an example of using the library with Japanese Katakana validation.

Example Usage:

import { InputComponent, LanguageValidationProps } from "react-localized-input";

const App = () => {
  const katakanaValidation: LanguageValidationProps = {
    isValid: (char) => /^[゠-ヿー・　-〿―—−￣]$/.test(char),
    lang: "ja-JP", // Japanese Katakana validation
  };

  return (
    <div>
      <h1>Localized Input Example</h1>
      <InputComponent
        languageValidation={katakanaValidation}
        placeholder="Enter Katakana"
        onChange={(e) => console.log(e.target.value)}
      />
    </div>
  );
};

export default App;

Language Validation Props

The languageValidation prop accepts an object with the following properties:

• isValid: A function that checks if a character is valid for the given language. It receives the character as an argument and should return true if the character is valid and false otherwise.

Example:

isValid: (char) => /^[a-zA-Z]$/.test(char);

• lang: A string representing the language code (e.g., "ja-JP" for Japanese).

Customizing Validation

You can customize the isValid function to validate input according to different character sets or scripts. Some examples are provided below.

Katakana Validation

const katakanaValidation: LanguageValidationProps = {
  isValid: (char) => /^[゠-ヿー・　-〿―—−￣]$/.test(char),
  lang: "ja-JP", // Japanese Katakana validation
};

Hiragana Validation

const hiraganaValidation: LanguageValidationProps = {
  isValid: (char) => /^[぀-ゟー゙゚]$/.test(char),
  lang: "ja-JP", // Japanese Hiragana validation
};

Alphanumeric Validation

const alphanumericValidation: LanguageValidationProps = {
  isValid: (char) => /^[a-zA-Z0-9]$/.test(char),
  lang: "en-US", // English alphanumeric validation
};

InputComponent Props

The InputComponent accepts the following props:

• languageValidation: An object containing the validation logic for the specific language (see Language Validation Props).
• placeholder: A string that specifies the placeholder text for the input field.
• onChange: A function that is called when the value of the input changes. It receives the event object as an argument.

Example:

onChange={(e) => console.log(e.target.value)}

• value (Optional): The value of the input field.
• disabled (Optional): Boolean that disables the input field when set to true.
• maxLength (Optional): The maximum number of characters allowed in the input field.

Example of Using the Input Component:

import { InputComponent, LanguageValidationProps } from "react-localized-input";

const App = () => {
  const katakanaValidation: LanguageValidationProps = {
    isValid: (char) => /^[゠-ヿー・　-〿―—−￣]$/.test(char),
    lang: "ja-JP",
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <h1>Localized Input Example</h1>
      <InputComponent
        languageValidation={katakanaValidation}
        placeholder="Enter Katakana"
        onChange={handleInputChange}
        value=""
      />
    </div>
  );
};

export default App;

Advanced Customization

Handling Multiple Languages

You can handle multiple languages in the same application by creating different validation functions for each language. Below is an example of handling both Katakana and Hiragana:

const katakanaValidation: LanguageValidationProps = {
  isValid: (char) => /^[゠-ヿー・　-〿―—−￣]$/.test(char),
  lang: "ja-JP", // Katakana validation
};

const hiraganaValidation: LanguageValidationProps = {
  isValid: (char) => /^[぀-ゟー゙゚]$/.test(char),
  lang: "ja-JP", // Hiragana validation
};

Custom Error Messages

You can further customize the library to display error messages when invalid characters are entered. Simply update your onChange handler to validate input and show a message.

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const value = e.target.value;
  if (katakanaValidation.isValid(value[value.length - 1])) {
    // Continue processing the valid input
    console.log(value);
  } else {
    console.log("Invalid input, please enter only Katakana characters");
  }
};

License

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