# react18-input-otp

> A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React.

Latest version **1.1.4** (published 2023-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react18-input-otp
pnpm add react18-input-otp
yarn add react18-input-otp
bun add react18-input-otp
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2023-07-10 |
| First published | 2022-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Ritik Banger |
| Maintainers | ritikb |
| Keywords | otp, input, code, passcode, component |

## Links

- npm: https://www.npmjs.com/package/react18-input-otp
- Repository: https://github.com/ritikbanger/react18-input-otp
- Homepage: https://ritikbanger.github.io/react18-input-otp
- Issues: https://github.com/ritikbanger/react18-input-otp/issues
- npm.io page: https://npm.io/package/react18-input-otp

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 1.1.4 (latest) — 2023-07-10
- 1.1.3 — 2023-03-12
- 1.1.2 — 2022-12-26
- 1.1.1 — 2022-11-30
- 1.1.0 — 2022-08-14
- 1.0.8 — 2022-08-09
- 1.0.7 — 2022-08-08
- 1.0.6 — 2022-08-08
- 1.0.5 — 2022-08-08
- 1.0.4 — 2022-08-08
- 1.0.3 — 2022-08-08
- 1.0.2 — 2022-08-08
- 1.0.1 — 2022-08-08
- 1.0.0 — 2022-08-08

## README

# react18-input-otp

[![npm version](https://badge.fury.io/js/react18-input-otp.svg)](https://badge.fury.io/js/react18-input-otp) [![npm](https://img.shields.io/npm/dm/react18-input-otp.svg?logo=npm)](https://www.npmjs.com/package/react18-input-otp) [![npm](https://img.shields.io/bundlephobia/minzip/react18-input-otp)](https://www.npmjs.com/package/react18-input-otp)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.

![see here](https://github.com/ritikbanger/react18-input-otp/blob/main/src/demo/demo.gif)

[Live Demo](https://ritikbanger.github.io/react18-input-otp)

[CodeSandbox](https://codesandbox.io/s/react18-input-otp-0nxzx7?file=/src/App.js)

## Features

- A fully customisable OTP input package with support of React 18 and Typescript.
- It works great on both react and ionic app. Works like a charm on mobile too.
- You can specify only numeric inputs with inputNum prop.
- Works perfectly with clipboard paste feature on web and mobile.
- The only OTP input package on npm that supports 'enter' key to submit.
- Zero OTP paste issues on Android.
- Easy paste on iOS chrome, read from SMS feature.
- Supports onSubmit optional prop. You do not even need a button to submit.
- You can use this package for phone number inputs too.
- You can use this package for passcode fields too with inputSecure prop.
- You can provide custom css as well as input props to the React18-input-otp.
- 0 dependencies.
- Minzipped size only 3.6 kb.
- No open issues.
- No security bugs.

## Installation

[![NPM](https://nodei.co/npm/react18-input-otp.png?compact=true)](https://nodei.co/npm/react18-input-otp/)

#### To install the latest stable version:

```
npm install --save react18-input-otp
```

#### Basic usage:

##### As class component

```jsx
import React, { Component } from 'react';
import OtpInput from 'react18-input-otp';

export default class App extends Component {
  state = { otp: '' };

  handleChange = (otp) => this.setState({ otp });

  render() {
    return <OtpInput value={this.state.otp} onChange={this.handleChange} numInputs={6} separator={<span>-</span>} />;
  }
}
```

##### As functional component with hooks

```jsx
import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';
export default function ReactOtpInput() {
  const [otp, setOtp] = useState('');
  const handleChange = (enteredOtp) => {
    setOtp(enteredOtp);
  };
  return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;
}
```

## API

<table>
  <tr>
    <th>Name<br/></th>
    <th>Type</th>
    <th>Required</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
   <tr>
    <td>id</td>
    <td>string</td>
    <td>false</td>
    <td>none</td>
    <td>Provide unique id for your OTP input.</td>
  </tr>
  <tr>
    <td>numInputs</td>
    <td>number</td>
    <td>true</td>
    <td>4</td>
    <td>Number of OTP inputs to be rendered.</td>
  </tr>
  <tr>
    <td>onChange</td>
    <td>function</td>
    <td>true</td>
    <td>console.log</td>
    <td>Returns OTP code typed in inputs.</td>
  </tr>
   <tr>
    <td>onSubmit</td>
    <td>function</td>
    <td>false</td>
    <td>console.log</td>
    <td>Returns OTP code on submit. This allows to submit the OTP on enter key too.</td>
  </tr>
  <tr>
    <td>value</td>
    <td>string / number</td>
    <td>true</td>
    <td>''</td>
    <td>The value of the OTP passed into the component.</td>
  </tr>
    <tr>
     <td>placeholder</td>
     <td>string</td>
     <td>false</td>
     <td>none</td>
     <td>Specify an expected value of each input. The length of this string should be equal to <code>numInputs</code>.</td>
   </tr>
  <tr>
    <td>separator</td>
    <td>component<br/></td>
    <td>false</td>
    <td>none</td>
    <td>Provide a custom separator between inputs by passing a component. For instance, <code>&lt;span&gt;-&lt;/span&gt;</code> would add <code>-</code> between each input.</td>
  </tr>
  <tr>
    <td>separateAfter</td>
    <td>number<br/></td>
    <td>false</td>
    <td>1</td>
    <td>Provide the count to set the separater after every input. For instance, <code>3</code> would add <code>-</code> after every third input.</td>
  </tr>
  <tr>
    <td>autoComplete</td>
    <td>string<br/></td>
    <td>false</td>
    <td>off</td>
    <td>Provide the autocomplete feature for the input. Now, supports <code>one-time-code</code> as autoComplete.</td>
  </tr>
   <tr>
    <td>ariaLabelOverride</td>
    <td>string<br/></td>
    <td>false</td>
    <td>none</td>
    <td>Provide the custom arialabel for the input.</td>
  </tr>
  <tr>
    <td>containerStyle</td>
    <td>style (object) / className (string)</td>
    <td>false</td>
    <td>none</td>
    <td>Style applied or class passed to container of inputs.</td>
  </tr>
  <tr>
    <td>inputStyle</td>
    <td>style (object) / className (string)</td>
    <td>false</td>
    <td>none</td>
    <td>Style applied or class passed to each input.</td>
  </tr>
  <tr>
    <td>focusStyle</td>
    <td>style (object) / className (string)</td>
    <td>false</td>
    <td>none</td>
    <td>Style applied or class passed to inputs on focus.</td>
  </tr>
  <tr>
    <td>isDisabled</td>
    <td>boolean</td>
    <td>false</td>
    <td>false</td>
    <td>Disables all the inputs.</td>
  </tr>
  <tr>
    <td>disabledStyle</td>
    <td>style (object) / className (string)</td>
    <td>false</td>
    <td>none</td>
    <td>Style applied or class passed to each input when disabled.</td>
  </tr>
  <tr>
    <td>hasErrored</td>
    <td>boolean</td>
    <td>false</td>
    <td>false</td>
    <td>Indicates there is an error in the inputs.</td>
  </tr>
  <tr>
    <td>errorStyle</td>
    <td>style (object) / className (string)</td>
    <td>false</td>
    <td>none</td>
    <td>Style applied or class passed to each input when errored.</td>
  </tr>
  <tr>
    <td>isSuccessed</td>
    <td>boolean</td>
    <td>false</td>
    <td>false</td>
    <td>Indicates there is success with the inputs..</td>
  </tr>
  <tr>
    <td>successStyle</td>
    <td>style (object) / className (string)</td>
    <td>false</td>
    <td>none</td>
    <td>Style applied or class passed to each input when success.</td>
  </tr>
  <tr>
    <td>shouldAutoFocus</td>
    <td>boolean</td>
    <td>false</td>
    <td>false</td>
    <td>Auto focuses input on initial page load.</td>
  </tr>
  <tr>
    <td>isInputNum</td>
    <td>boolean</td>
    <td>false</td>
    <td>false</td>
    <td>Restrict input to only numbers.</td>
  </tr>
  <tr>
    <td>isInputSecure</td>
    <td>boolean</td>
    <td>false</td>
    <td>false</td>
    <td>Masks input characters.</td>
  </tr>
  <tr>
    <td>data-cy</td>
    <td>string</td>
    <td>false</td>
    <td>-</td>
    <td>Test attribute passed to the inputs.</td>
  </tr>
  <tr>
    <td>data-testid</td>
    <td>string</td>
    <td>false</td>
    <td>-</td>
    <td>Test attribute passed to the inputs.</td>
  </tr>
  <tr>
    <td>custom-test-id</td>
    <td>string</td>
    <td>false</td>
    <td>-</td>
    <td>Custom test attribute passed to the inputs.</td>
  </tr>
  <tr>
    <td>custom-test-attr</td>
    <td>string</td>
    <td>false</td>
    <td>-</td>
    <td>Custom test attribute passed to the inputs.</td>
  </tr>
   <tr>
    <td>inputProps</td>
    <td>InputHTMLAttributes | InputHTMLAttributes[]</td>
    <td>false</td>
    <td>-</td>
    <td>Custom input props.</td>
  </tr>
</table>

## Development

#### To run the development server:

```
npm run dev
```

## Checklist

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&logo=github)](https://github.com/ritikbanger/react18-input-otp/pulls) [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ritikbanger/react18-input-otp)

- [x] Add flowtypes
- [x] Add ESLint, Prettier for code quality
- [x] Add styling support for states including focus/disabled
- [ ] Write tests

## Contributing

[![GitHub issues](https://img.shields.io/github/issues-raw/ritikbanger/react18-input-otp?logo=github)](https://github.com/ritikbanger/react18-input-otp/issues) [![GitHub pull requests](https://img.shields.io/github/issues-pr/ritikbanger/react18-input-otp?logo=git)](https://github.com/ritikbanger/react18-input-otp/pulls)

Feel free to open [issues](https://github.com/ritikbanger/react18-input-otp/issues/new/choose) and [pull requests](https://github.com/ritikbanger/react18-input-otp/pulls)!

## License

[![NPM](https://img.shields.io/npm/l/react18-input-otp)](https://github.com/ritikbanger/react18-input-otp/blob/master/LICENSE)

Special Thanks to [devfolioco](https://github.com/devfolioco/react-otp-input). This project is build on top of [react-otp-input](https://github.com/devfolioco/react-otp-input).

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/react18-input-otp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._