devfolioco/ react-otp-input

(v2.3.0) 4 months ago

JavaScript

CSS

HTML

React

otp

View on GitHub

Need help with react-otp-input?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

devfolioco

172 Stars

271 Forks

MIT License

181 Commits

57 Opened issues

Description

:heavy_check_mark: OTP Input Component for React

Services available

Need anything else?

Contributors list

Readme

react-otp-input

Name: react-otp-input
Brand: react-otp-input
SKU: //devfolioco/react-otp-input
Rating: 2.18 (172 reviews)

A fully customizable, one-time password input component for the web built with React.

Live Demo

CodeSandbox

Installation

To install the latest stable version:

npm install --save react-otp-input

Basic usage:

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

export default class App extends Component {
  state = { otp: '' };
  handleChange = otp => this.setState({ otp });
  render() {
    return (
      -}
      />
    );
  }
}

API

Name	Type	Required	Default	Description
numInputs	number	true	4	Number of OTP inputs to be rendered.
onChange	function	true	console.log	Returns OTP code typed in inputs.
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 to `numInputs`.
separator	component	false	none	Provide a custom separator between inputs by passing a component. For instance, `<span>-</span>` would add `-` between each input.
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.
focusStyle	style (object) / className (string)	false	none	Style applied or class passed to inputs on focus.
isDisabled	boolean	false	false	Disables all the inputs.
disabledStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when disabled.
hasErrored	boolean	false	false	Indicates there is an error in the inputs.
errorStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when errored.
shouldAutoFocus	boolean	false	false	Auto focuses input on initial page load.
isInputNum	boolean	false	false	Restrict input to only numbers.
isInputSecure	boolean	false	false	Masks input characters.

Breaking changes when porting to v1.0.0

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