Mui Otp Input

Component is in development phase

A Simple One Time Password input component based on Mui.

Usage

Codesandbox Playground

import { OtpInput } from 'mui-otp-input';

function App() {
  const [value, setValue] = React.useState('');

                                       //123456  // 123-456
  const handleChange = React.useCallback((value, formattedValue) => {
    setValue(value);
  }, []);

  return (
    <OtpInput value={value} onChange={handleChange} format="___-___" />
  );
}

Props

type OtpInputProps = {
  format: OtpInputFormat;
  value: OtpInputValue;
  type?: OTPInputType; // default: numeric
  isSecure?: boolean; // default: false
  isDisabled?: boolean; // default: false
  onChange: (
    value: OtpInputValue,
    formattedValue: FormattedOtpInputValue
  ) => void;
};

Name	Type	Description
format	string (alias: OtpInputFormat)	Format represents how the input will be rendered with seperators. In format _ represents an input field ex: _-_-_-_. Note: format must not change in between renders
value	string (alias: OtpInputValue)	Value to be filled in each rendered input
type	'numeric'/'alphanumeric'	numeric (default): input type will be number and RegExp /^[0-9]$/ used to validate input. alphanumeric: input type will be text and RegExp /^[a-zA-Z0-9]$/ used to validate input.
isSecure	boolean	Inputs rendered with type password. Respective RegExp is used based on type prop to validate value.
isDisabled	boolean	To Disable all Inputs
onChange	( value: OtpInputValue, formattedValue: FormattedOtpInputValue ) => void;	A callback for when the input value changes.

Commands

This Project has been bootstrapped using TSDX

TSDX scaffolds your new library inside /src, and also sets up a Parcel-based playground for it inside /example.

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
npm i # or yarn to install dependencies
npm start # or yarn start

The default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.

Configuration

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Jest

Jest tests are set up to run with npm test or yarn test.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.

Tests

yarn test

This library uses Jest and testing-library for unit tests

Code Quality

Eslint and Prettier is used to maintain the code quality

yarn lint

Code quality is set up with prettier, husky, and lint-staged.

Deploying the Example Playground

The Playground is just a simple Parcel app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for manually deploying with the Netlify CLI (npm i -g netlify-cli):

cd example # if not already in the example folder
npm run build # builds to dist
netlify deploy # deploy the dist folder

Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:

netlify init
# build command: yarn build && cd example && yarn && yarn build
# directory to deploy: example/dist
# pick yes for netlify.toml

Publishing to NPM

We recommend using np.