React-input-library NPM

# 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

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"
/>