@akashch/otp-input
A fully customizable, one-time password input component for the web built with React.
Installation
To install the latest stable version:
npm install --save @akashch/otp-input
Basic usage:
import React, { useState } from "react";
import OtpInput from "@akashch/otp-input";
export default function App() {
const [otp, setOtp] = useState("");
return (
<OtpInput
numValues={6}
inputClass={"any-class"}
parentClass={"any-parent-class"}
onChange={(otp) => {
setOtp(otp);
}}
type={"number"}
/>
);
}API
You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.| Name |
Type | Required | Default | Description |
|---|---|---|---|---|
| numValues | number | false | 4 | Number of inputs to be rendered. |
| onChange | function | true | console.log | Returns OTP code typed in inputs. |
| separator | Any Character |
false | none | Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input. |
| inputClass | className (string) | false | none | Style applied or class passed to parent of inputs. |
| inputClass | className (string) | false | none | class passed to each input. |
| inputType | <input> type | false | number | The type of the input that will be passed to the input element being rendered. |
Development
To run the vite example:
cd example
npm run dev
Checklist
- [ ] Write tests
- [ ] Add actions for lint checks and tests
Contributing
Feel free to open issues and pull requests!
License
This project follows the all-contributors specification. Contributions of any kind welcome!