react-otp-z
v1.0.0-np
Published
React hook otp input, copy paste, etc... (Lib)
Downloads
12
Maintainers
Readme
Description
- Simple react otp input.
- Support copy paste
Usage
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";
Snippet
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>
props
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 | |
RUN
LIVE EXAMPLE
version
2.0.0-np:
- change event: onCompleted and support onEnter
- fix compare: otpSize and value
- optimze
License
MIT