Otp-react-code-input NPM

OTP Inputs with SMS

This npm package provides a disruptive solution for creating OTP code inputs with SMS functionality.

Installation

Install the package using npm and yarn:

npm install otp-react-code-input

yarn add otp-react-code-input

Usage

     import { CodeInput } from 'react-otp-input';

Then, you can use the CodeInput component in your JSX code:

     <CodeInput
          isError={isError}
          length={5}
          inputMode='text'
          onChange={handleValue}
          width={64}
          height={64}
        />

Props

Prop	Type	Required	Default	Description
length	Content Cell	Yes	-	The length of the OTP. Users will be allowed to input exactly this number of characters.
height	number	Yes	-	The height of the input field in pixels.
width	number	Yes	-	The width of the input field in pixels.
isError	boolean	No	false	Indicates whether an error state should be displayed for the input field.
onChange	(newValue: string) => void	Yes	-	A callback function that will be invoked whenever the OTP value changes.
focus	boolean	No	false	Determines whether the input field should receive focus when the component is rendered.
inputMode	InputMode	No	'text'	Specifies the type of input mode for the field. Available options are: text/numeric.
type	text/number	No	'text'	-