@jonwasdone/react-otp NPM

React OTP Input

A simple fully customizable OTP input component for React that focuses on versatility and robustness.

see here

Install

$ npm install --save @jonwasdone/react-otp

Usage

function App() {
  const [otp, setOtp] = useState("");

  return (
    <OTPInputGroup length={6} onChange={(otp) => setOtp(otp)} value={otp} />
  );
}

export default App;

API

Prop	Type	Default	Description
autoFocus	boolean	true	Whether the input should be focused on mount.
length	number	4	The length of the OTP input.
onChange	(otp: string) => void	-	The callback function that is called when the OTP input changes.
onSubmit	(otp: string) => void	-	The callback function that is called when the OTP input is completed. Once the last value of the input is entered, the onSubmit callback gets triggered.
onPaste	(otp: string) => void	-	The callback function that is called when the OTP input is pasted.
defaultValue	string	""	The default value of the OTP input.
value	string	-	The value of the OTP input.
style	React.CSSProperties	{}	The style of the input.
inputClassName	string	-	The class name of the input.
inputGroupClassName	string	-	The style of the input container.
inputSeparatorRender	(index: number) => React.ReactNode	-	The function that returns the separator between the inputs. The separator can be conditionally rendered in relation to the id of the input before.

Styling

The component is fully customizable. You can style the input and the input container by passing the style, inputClassName, and inputGroupClassName props.

<OTPInputGroup
  length={6}
  onChange={(otp) => setOtp(otp)}
  value={otp}
  style={{ color: "red" }}
  inputClassName="input"
  inputGroupClassName="input-group"
/>

To include the default styles, you can import the import "@jonwasdone/react-otp/dist/index.css"; file from the package. If you are using Tailwind CSS, you don't need to include the styles as the component is built with Tailwind.