Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devfolioco/react-otp-input
:heavy_check_mark: OTP Input Component for React
https://github.com/devfolioco/react-otp-input
component otp react
Last synced: 12 days ago
JSON representation
:heavy_check_mark: OTP Input Component for React
- Host: GitHub
- URL: https://github.com/devfolioco/react-otp-input
- Owner: devfolioco
- License: mit
- Created: 2018-06-08T13:19:26.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-07-27T10:27:23.000Z (4 months ago)
- Last Synced: 2024-10-28T21:50:35.304Z (14 days ago)
- Topics: component, otp, react
- Language: TypeScript
- Homepage: http://devfolioco.github.io/react-otp-input
- Size: 3.27 MB
- Stars: 664
- Watchers: 10
- Forks: 426
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-otp-input
[![npm version](https://badge.fury.io/js/react-otp-input.svg)](https://badge.fury.io/js/react-otp-input) [![npm](https://img.shields.io/npm/dw/react-otp-input.svg?logo=npm)](https://www.npmjs.com/package/react-otp-input) [![npm](https://img.shields.io/bundlephobia/minzip/react-otp-input)](https://www.npmjs.com/package/react-otp-input)
[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)A fully customizable, one-time password input component for the web built with React.
![see here](https://media.giphy.com/media/lN98dFU6h3oP0wWS5x/giphy.gif)
[Live Demo](https://devfolioco.github.io/react-otp-input)
## Installation
[![NPM](https://nodei.co/npm/react-otp-input.png?compact=true)](https://nodei.co/npm/react-otp-input/)
#### To install the latest stable version:
```
npm install --save react-otp-input
```### Still using v2?
No problem! You can find the documentation for v2 [here](https://github.com/devfolioco/react-otp-input/tree/v2.4.0)#### Basic usage:
```jsx
import React, { useState } from 'react';
import OtpInput from 'react-otp-input';export default function App() {
const [otp, setOtp] = useState('');return (
-}
renderInput={(props) => }
/>
);
}
```## API
Name
Type
Required
Default
Description
numInputs
number
true
4
Number of OTP inputs to be rendered.
renderInput
function
true
none
A function that returns the input that is supposed to be rendered for each of the input fields.
The function will get two arguments:inputProps
andindex
.inputProps
is an object that contains all the props that should be passed to the input being rendered (Overriding these props is not recommended because it might lead to some unexpected behaviour).index
is the index of the input being rendered.
onChange
function
true
console.log
Returns OTP code typed in inputs.
onPaste
function
false
none
Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field.
Example:
const handlePaste: React.ClipboardEventHandler = (event) => {
const data = event.clipboardData.getData('text');
console.log(data)
};
value
string / number
true
''
The value of the OTP passed into the component.
placeholder
string
false
none
Specify an expected value of each input. The length of this string should be equal tonumInputs
.
renderSeparator
component / function
false
none
Provide a custom separator between inputs by passing a component. For instance,<span>-</span>
would add-
between each input. 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.
containerStyle
style (object) / className (string)
false
none
Style applied or class passed to container of inputs.
inputStyle
style (object) / className (string)
false
none
Style applied or class passed to each input.
inputType
<input> type
false
text
The type of the input that will be passed to the input element being rendered. In v2isInputNum
used to set the input type astel
and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input typenumber
. That behaviour is still supported if you passtel
to the inputType prop.
shouldAutoFocus
boolean
false
false
Auto focuses input on initial page load.
skipDefaultStyles
boolean
false
false
The component comes with default styles for legacy reasons. Passtrue
to skip those styles. This prop will be removed in the next major release.
### β οΈ Warning
Do not override the following props on the input component that you return from the `renderInput` prop. Doing so might lead to unexpected behaviour.
- `ref`
- `value`
- `onChange`
- `onFocus`
- `onBlur`
- `onKeyDown`
- `onPaste`
- `onInput`
- `type`
- `inputMode`## Migrating from v2
The v3 of `react-otp-input` is a complete rewrite of the library. Apart from making the API more customizable and flexible, this version is a complete rewrite of the library using TypeScript and React Hooks. Here are the breaking changes that you need to be aware of:
- You now need to pass your own custom input component that will be rendered for each of the input fields via `renderInput` prop. This gives you the flexibility to customize the input fields as you desire. This also means that props like `focusStyle`, `isDisabled`, `disabledStyle`, `hasErrored`, `errorStyle`, `isInputNum`, `isInputSecure`, `data-cy` and `data-testid` are no longer supported. You can achieve the same functionality and more by passing the relevant props directly to the input component that you return from the `renderInput` prop.
- The `separator` prop has now been renamed to `renderSeparator`. This prop now apart from accepting a component that will be rendered as a separator between inputs like it used to, now also accepts a function that returns a component. The function will get the index of the separator being rendered as an argument.
- A new prop called `inputType` has been added to the component. This prop can be used to specify the type of the input that will be passed to the input element being rendered. The default value of this prop is `number`.
## Migrating from v1
`react-otp-input` is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For `v1.0.0` and above, a `value` prop needs to be passed in the component for it to function as expected.
## Development
#### To run the vite example:
```
cd example
npm run dev
```## Checklist
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&logo=github)](https://github.com/devfolioco/react-otp-input/pulls) [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/devfolioco/react-otp-input)
- [ ] Write tests
- [ ] Add actions for lint checks and tests## Contributing
[![GitHub issues](https://img.shields.io/github/issues-raw/devfolioco/react-otp-input?logo=github)](https://github.com/devfolioco/react-otp-input/issues) [![GitHub pull requests](https://img.shields.io/github/issues-pr/devfolioco/react-otp-input?logo=git)](https://github.com/devfolioco/react-otp-input/pulls)
Feel free to open [issues](https://github.com/devfolioco/react-otp-input/issues/new/choose) and [pull requests](https://github.com/devfolioco/react-otp-input/pulls)!
## License
[![NPM](https://img.shields.io/npm/l/react-otp-input)](https://github.com/devfolioco/react-otp-input/blob/master/LICENSE)
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Abhishek Warokar
π» π¨ π§ π€ π
Aj
π» π¨ π€
Aromal Anil
π» π§
Gabriele Corti
π» οΈοΈοΈοΈβΏοΈ
Anoop
π»
Dewansh Rawat
π
Ishan Chhabra
π»
yaojie
π»
Prateek Surana
π» π§ π€ π π¨
SΓΌleyman BarΔ±Ε Eser
π
Steve Domino
π»
Stephen Hogan
π»
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!