import{useState,useRef}from'react';importOtpInputfrom'react-verify-otp';import'/node_modules/react-verify-otp/dist/style.css';constApp=()=>{constotpRef=useRef(null);const[otp,setOtp]=useState('');consthandleChangeOtp=(otp)=>{setOtp(otp)};// use "otpRef?.current?.[method_name];"// example: otpRef?.current?.clearOtp();// used to call some methods defined in this libraryreturn(<OtpInputref={otpRef}otpValue={otp}onChange={handleChangeOtp}separator={'♦'}/>);};exportdefaultApp
API
Name
Type
Required
Default
Description
otpValue
string
true
''
The value of the OTP.
onChange
function
true
-
Method change OTP code.
numberInputs
number
false
4
Number of OTP inputs to be rendered.
placeholder
string
false
''
Suggest value of each input. The length of this string should be equal to numberInputs.
separator
any
false
null
Provide a custom separator between inputs by passing a component, string, number or symbols etc.
For example:
<>♦</>,
<span>♦</span>
etc.
autoFocus
boolean
false
false
Autofocus input on initial page load.
isDisabled
boolean
false
false
Disables all the inputs.
isError
boolean
false
false
Indicates there is an error in the inputs.
isInputNumber
boolean
false
false
Only numbers enter.
isInputSecure
boolean
false
false
Masks input characters.
styleOtpWrapper
string
false
none
Style passed to container of inputs.
styleOtpInput
string
false
none
Style passed to each input.
Use ref
Name
Type
Required
Default
Description
ref
any
false
null
Used to access available methods.
clearOtp
function
-
-
Clear the value OTP present.
getInputOtpRef
function
-
-
Access to each inputs.
getOtpValue
function
-
-
Get the value of the OTP.
Changelog
v1:
v1.0.0 - The first, create and build project push to github, fix deploy to vercel, publish to npm package management.
v1.1.0 - Add description to package.json, show info to npm package management (keywords, author, license, homepage, repository).
v1.1.1 - Fix error import package when use reality (but do not success :(().
v1.1.2 - I'm trying fix error import package when use reality.