- Simple react otp input.
- Support copy paste
Install the package
npm install --save react-otp-input-z
Import the module in the place you want to use:
import "react-otp-input-z/build/styles.css";
import ReactOtp from "react-otp-input-z";
const [value, setValue] = React.useState("5555");
const [isDone, setDone] = React.useState(false);
<ReactOtp
{/* secret */}
{/*
otpSize={6}
// display 5 5 5 5 ''
*/}
otpSize={5}
value={value}
onCompleted={function (value, isDone): void {
setValue(value)
setDone(isDone)
}}
/>
{/* isDone: boolean add event when isDone*/}
<button>Check otp</button>
see index.d.ts
props | type | description |
---|---|---|
className? | string | |
otpClassName? | string | |
type?: | number / text | |
secret? | boolean (false) | |
disabled? | boolean (false) | |
readonly? | boolean (false) | |
useUpDownArrow? | boolean (false) | |
selectionOnFocus? | boolean (true) | |
value? | string / string[] | |
enablePaste? | boolean (true) // allow copy paste | |
autoPasteFull? | boolean (true) => paste full when copytext.length === otpSize (any box) | |
splitIcon? | React.ReactNode / String | |
otpSize? | number (default 4) | |
autoFocus? | boolean (true) | |
onCompleted? | Function (value: string, isDone: boolean) => void | |
onEnter? | Function (value: string, isDone: boolean) => void |
2.0.0-np:
- change event: onCompleted and support onEnter
- fix compare: otpSize and value
- optimze
MIT