react-custom-otp-input
Version:
A Reusable react custom otp (One-Time Password) input
76 lines (58 loc) • 3 kB
Markdown
[](https://www.npmjs.com/package/react-custom-otp-input)
> A React component library for adding OTP (One-Time Password) functionality to your project.
## Install
```bash
npm install react-custom-otp-input
```
## Usage
```component.tsx
import React, { useState } from 'react';
import { OtpInput } from 'react-custom-otp-input';
const Example = () => {
const [otp, setOtp] = useState('');
return (
<OtpInput
length={6}
onChangeOtp={(otp: any) => {
setOtp(otp);
}}
secure={true}
/>
);
}
```
| Props | Type | Description | Default |
|-----------------|------------------------------------------------|-------------------------------------------------------------------------|----------|
| length | number | The number of OTP input fields to render. **Required**. | 6 |
| onChangeOtp | Function | A callback function to handle the entered OTP. **Required**. | - |
| secure | boolean | Hides the entered input values | false |
| className | string | Class for each input fields | - |
| width | number | Width for each input fields | - |
| height | number | Height for each input fields | - |
| size | number | Font size for each input fields | - |
| styles | style(object) | Style for each input fields | - |
```component.tsx
import React, { useState } from 'react';
import { OtpInput } from 'react-custom-otp-input';
const Example = () => {
const [otp, setOtp] = useState('');
return (
<OtpInput
length={6}
onChangeOtp={(otp: any) => {
setOtp(otp);
}}
secure={true}
/>
);
};
```
\
The react-custom-otp-input library is designed to simplify the process of adding OTP functionality to your React projects. It provides an OTP component that can be easily integrated into your codebase.
To install the library, use the provided npm command, as shown in the "Install" section. Make sure to import the necessary components.
Feel free to explore the library and customize it according to your needs!
MIT © [Oyinlola Abolrin](https://github.com/khrisbreezy)