📌 A One-Time Password input designed for the React library MUI

Overview

MUI OTP input

An OTP input designed for the React library MUI

license ts npm

Installation

// with npm
npm install mui-one-time-password-input

// with yarn
yarn add mui-one-time-password-input

Usage

import React from 'react'
import { MuiOtpInput } from 'mui-one-time-password-input'

const MyComponent = () => {
  const [otp, setOtp] = React.useState('')

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

  return (
    <MuiOtpInput value={otp} onChange={handleChange} />
  )
}

Documentation

Changelog

Go to Github Releases

TypeScript

This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.

🐛 Bugs

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

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍 . This helps maintainers prioritize what to work on.

LICENSE

MIT

You might also like...
A React Hook & Container to help with payment card input fields.
A React Hook & Container to help with payment card input fields.

React Payment Inputs A React Hook & Container to help with payment card input fields. React Payment Inputs Demos Requirements Installation Usage With

A react component input with floating lable style
A react component input with floating lable style

Floating label Field with Tailwindcss

A lightweight React component input tags

📋 React input tags using hooks

🍿⚛Official React library to use Popper, the positioning library

React Popper React wrapper around Popper. important note: Popper is not a tooltip library, it's a positioning engine to be used to build features such

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

React standard library—must-have toolbox for any React project.
React standard library—must-have toolbox for any React project.

libreact React standard library—must-have toolbox for any React project. LAUNCH STORYBOOK 🚀 See documentation Most components implement Isomorphic -

PyScript-React integrates PyScript library into react components

PyScript-React integrates PyScript library into react components. Making it easier to use inside your react projects 😊

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

🌈  A UI Design Language and React UI library
🌈 A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features 🌈 Enterprise-class UI designed for web

Owner
Victor de la Fouchardière
Web Frontend Developer at @frichti . TypeScript/Javascript enthusiast.
Victor de la Fouchardière
🎁 Custom Input Text React - An Editable text input component for react.

?? Custom Input Text React - An Editable text input component for react.

Farsab B 1 Jun 4, 2022
React-verification-input is a customizable, masked input that can be used to enter all sorts of codes

react-verification-input is a customizable, masked input that can be used to enter all sorts of codes e.g. security codes when two-factor authenticating. Also I'm sure you can think of many more creative use cases.

Andreas Willi 72 Sep 20, 2022
📕React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

?? React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

Ankit Kumar Pandit 550 Sep 29, 2022
Dash Grocery - a Dash component library designed to collect interesting and useful React projects to wrap.

Dash Grocery - a Dash component library designed to collect interesting and useful React projects to wrap.

null 13 Jul 16, 2022
A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles

A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles.

Utkarsh Verma 32 Sep 21, 2022
A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React landing page template Open is a free React landing page template designed for developers/makers who want to create a quick and professional

Cruip 2.3k Sep 24, 2022
Toast-notify: IOS Phone notification designed popup for React Component

IOS Phone notification designed popup for React Component

The Boring School 4 Jun 27, 2022
A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Headless UI A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Documentation For full

Tailwind Labs 16.9k Sep 30, 2022
Periqles is a React component library for Relay and Apollo that makes it easy to collect user input.

periqles Painless forms for GraphQL. Demo → Periqles is a React component library for Relay and Apollo that makes it easy to collect user input. Periq

OSLabs Beta 123 Sep 3, 2022
☎️ react-telephone: Tiniest react input phone component (auto formating included)

☎️ react-telephone: Tiniest react input phone component (auto formating included)

Joris 4 Jun 10, 2022