npm

mui-otp-input-field
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

MUI OTP Input Field

An OTP input based on React library MUI

license ts npm

Installation

// with npm
npm install mui-otp-input-field@latest

Usage

import { useState } from "react";
import { MuiOtp } from "mui-otp-input-field";

const MyComponent = () => {
  const [otp, setOtp] = useState("");

  const handleChange = (newValue) => {
    setOtp(newValue);
  };

  return <MuiOtp value={otp} onChange={handleChange} />;
};

API Reference ( Props to the MuiOtp Component )

Name Type Required Default Value Description
length number true none Indicates the no.of input boxes to be rendered.
value string optional "" A value to initialize the MuiOtp component. This is optional because the container component maintains a state for the inputs.
onChange function optional none Called every time input changes.
onComplete function optional none Called when the otp length satifies the provided length.
seperator ReactNode optional none A React component to render between the inputs.
type InputTypes optional text Traditional input types. This includes "text","number" and "password".
enableFocus boolean optional true Allows auto focus of the next input when entered value in previous one.
MuiTextFieldProps MuiTextFieldProps optional textAlign="center" The props to the underlying MuiTextField.
containerStyles CSSProperties optional display:"flex", gap:"4px" ,alignItems:"center" The styles to the container encapsulating the input fields.

Hooks

Note: These hooks are used for internal purposes. External usage of this may lead to unexpected behaviour. Its highly suggested to turn off the enableFocus in the MuiOtp component before using these hooks.

useFocus

Returns a function named focus, to handle the focusing of the inputs based on index.

useInitialFocus

Used to focus the first input on load.

Note:Default selector for these hooks is "otp-container"

Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

Feature Requests

Please raise an issue for any feature requests.

LICENSE

MIT

Package Sidebar

Install

npm i mui-otp-input-field

Weekly Downloads

3

Version

1.1.1

License

ISC

Unpacked Size

15.2 kB

Total Files

5

Last publish

Collaborators

  • diptabose