react-localized-input/README.md

A simple input library for React and Next.js

# 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:

```bash
npm install react-localized-input
```

### Using yarn:

```bash
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:

```tsx
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:

```ts
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

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

### Hiragana Validation

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

### Alphanumeric Validation

```tsx
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:

```ts
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:

```tsx
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:

```tsx
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.

```tsx
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.