phuongnam-code/react-verify-otp

react-verify-otp

Description: react-verify-otp a fully customizable, one-time password input component for the web built with React.

Demo

Installation

To install the latest stable version:

npm install react-verify-otp

yarn add react-verify-otp

pnpm install react-verify-otp

Basic Use

import { useState, useRef } from 'react';
import OtpInput from 'react-verify-otp';
import '/node_modules/react-verify-otp/dist/style.css';

const App = () => {
  const otpRef = useRef(null);
  const [otp, setOtp] = useState('');

  const handleChangeOtp = (otp) => {
    setOtp(otp)
  };

  // use "otpRef?.current?.[method_name];"
  // example: otpRef?.current?.clearOtp();
  // used to call some methods defined in this library

  return (
    <OtpInput
      ref={otpRef}
      otpValue={otp}
      onChange={handleChangeOtp}
      separator={'♦'}
    />
  );
};

export default App

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.
• v1.1.3 - It has been successfully fixed.
• v1.2.3 - Update typings fix warning & import css file (but fail).
• v1.3.3 - I'm trying import css dynamic, however, I added a temporary guide in this description.