Movatterモバイル変換

hunghg255/reactjs-otp-inputPublic

forked fromdevfolioco/react-otp-input

NotificationsYou must be signed in to change notification settings
Fork1
Star15

✔️ OTP Input Component for React

reactjs-otp-input.vercel.app/

License

MIT license

15 stars 429 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 222 Commits
.github		.github
src		src
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmignore		.npmignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json

Repository files navigation

A library reactjs to create OTP input

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

Support auto fill on mobile (safari, chrome....)

Live Demo

Installation

To install the latest stable version:

pnpm install reactjs-otp-input@latest

Basic usage:

importReact,{Component}from'react';import{OtpInput}from'reactjs-otp-input';constApp=()=>{const[otp,setOtp]=useState('');consthandleChange=(otp)=>setOtp(otp);return<OtpInputvalue={otp}onChange={handleChange}numInputs={6}separator={<span>-</span>}/>;};

To run the development server:

npm run dev

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.
data-cy	string	false	-	Test attribute passed to the inputs.
data-testid	string	false	-	Test attribute passed to the inputs.