react-input-library

# React Input Library

A customizable and reusable input component for React applications. This library provides a flexible `InputField` component that can be easily integrated into your projects.


## Installation

To install the library, use npm or yarn:

```bash
npm install react-input-library

or

yarn add react-input-library

Usage

Here's an example of how to use the InputField component in your React application:

Basic Usage

Import the InputField component and use it in your React application:

import React, { useState } from 'react';
import { InputField } from 'react-input-library ';

const MyForm = () => {
  const [name, setName] = useState('');

  const handleChange = (value) => {
    setName(value);
  };

  return (
    <div>
      <InputField
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={handleChange}
      />
    </div>
  );
};

export default MyForm;

Props

The InputField component accepts the following props:

Prop	Type	Description	Default
type	string	The type of the input field	text
placeholder	string	The placeholder text for the input field	''
value	string	The value of the input field (controlled component)	''
onChange	(value: string) => void	Callback function called when the input value changes	-
onBlur	(value: string) => void	Callback function called when the input loses focus	-
onFocus	() => void	Callback function called when the input gains focus	-
name	string	Name attribute for the input field	-
id	string	ID attribute for the input field	-
maxLength	number	Maximum length of the input field	-
minLength	number	Minimum length of the input field	-
disabled	boolean	Whether the input field is disabled	false
readOnly	boolean	Whether the input field is read-only	false
required	boolean	Whether the input field is required	false
style	React.CSSProperties	Inline styles for the input field	-
className	string	Additional CSS class for the input field	-

InputField OTP Component

The InputField OTP component is designed to provide a customizable input field for entering OTP (One Time Password) codes. It allows users to enter digits one by one and handles navigation between input fields automatically.

Usage

Import OTPInput into your component and use it within your JSX:

import React, { useState } from 'react';
import {OTPInput} from 'react-input-library';

const MyComponent = () => {
  const [otpValue, setOtpValue] = useState('');

  const handleChange = (value: string) => {
    setOtpValue(value);
  };

  return (
    <div>
      <h2>Enter OTP</h2>
      <OTPInput
        length={6}
        value={otpValue}
        onChange={handleChange}
        size="md"
        gap="10px"
        error={false}
      />
    </div>
  );
};

export default MyComponent;

Props

Prop	Type	Default	Description
length	number	Required	The length of the OTP input fields
value	string	Required	The current value of the OTP input
onChange	(value: string) => void	Required	Function called when the OTP value changes
onBlur	(value: string) => void	Optional	Function called when focus is removed from the OTP input
onFocus	() => void	Optional	Function called when the OTP input is focused
size	'sm' | 'md' | 'lg' | 'xl' | 'xxl'	'md'	Size of the OTP input fields. One of 'sm', 'md', 'lg', 'xl', 'xxl'.
gap	string	'8px'	Gap between OTP input fields
error	boolean	false	Indicates whether there is an error state in the OTP input
className	string	undefined	Additional CSS class to apply to the OTPInput component
style	React.CSSProperties	undefined	Additional inline styles to apply to each OTP input field
borderStyle	string	'1px solid black'	Border style of the OTP input fields
errorBorderColor	string	'red'	Border color of the OTP input fields when in error state

Customization

The InputField OTP component can be customized in various ways:

• Size: Adjust the size of the OTP input fields using the size prop ('sm', 'md', 'lg', 'xl', 'xxl').
• Styling: Apply custom CSS classes (className) and inline styles (style) to the OTP input fields.
• Error Handling: Set the error prop to true to indicate an error state, which can change the appearance of the OTP input fields (errorBorderColor).

Examples

Basic InputField.OTP Usage

<OTPInput
  length={6}
  value={otpValue}
  onChange={handleChange}
/>

Customized InputField.OTP with Error State

<OTPInput
  length={4}
  value={otpValue}
  onChange={handleChange}
  size="lg"
  gap="12px"
  error={true}
  errorBorderColor="darkred || #000000"
  style={{ backgroundColor: 'lightyellow' }}
  className="custom-otp-input"
/>

Development

To build the library locally, run:

npm run build

Contributing

We welcome contributions! If you'd like to contribute to this project, please follow these steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature-name)
3. Make your changes
4. Commit your changes (git commit -am 'Add new feature')
5. Push to the branch (git push origin feature/your-feature-name)
6. Create a new Pull Request

Please make sure to update tests as appropriate.

License

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

Author

[Awah Bright] - [https://github.com/Beemhuse/react-input-library.git/] - [[e-mail]]