# @igloo_cloud/mui-otp-input

> A MUI-based input for OTPs

Latest version **1.0.4** (published 2021-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @igloo_cloud/mui-otp-input
pnpm add @igloo_cloud/mui-otp-input
yarn add @igloo_cloud/mui-otp-input
bun add @igloo_cloud/mui-otp-input
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-12-16 |
| First published | 2021-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 6 |
| Unpacked size | 22.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | IglooCloud |
| Maintainers | andreazanin, samueledassatti, igloo.ooo |

## Links

- npm: https://www.npmjs.com/package/@igloo_cloud/mui-otp-input
- Repository: https://github.com/IglooCloud/mui-otp-input
- Homepage: https://github.com/IglooCloud/mui-otp-input#readme
- Issues: https://github.com/IglooCloud/mui-otp-input/issues
- npm.io page: https://npm.io/package/@igloo_cloud/mui-otp-input

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.2.2
- [react-scripts](https://npm.io/package/react-scripts.md) ^4.0.3
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.7.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.6.0

## Recent versions

- 1.0.4 (latest) — 2021-12-16
- 1.0.3 — 2021-12-06
- 1.0.2 — 2021-12-06
- 1.0.1 — 2021-12-06
- 1.0.0 — 2021-12-06

## README

<p align="center">
  <img src="https://static.igloo.ooo/logo-192.png" alt="Igloo logo" width="128"/>
</p>

<h1 align="center">MUI OTP Input</h1>

A customizable input for numeric one-time passwords based on [MUI](https://mui.com/).

<p align="center">
  <img src="https://user-images.githubusercontent.com/23523551/144852579-c97643e5-bc97-48a6-9602-a59bedd75998.png" alt="Component screenshot" width="960"/>
</p>

# Installation

Just download the library from [npm](https://www.npmjs.com/package/@igloo_cloud/mui-otp-input).

**Using npm**

```bash
npm install @igloo_cloud/mui-otp-input --save
```

**Using Yarn**

```bash
yarn add @igloo_cloud/mui-otp-input
```

# Usage

This library exports an `OtpInput` component as default. Once added to your app the component will accept the following props:

| Name             | Type     | Default    | Description                                                                             |
| ---------------- | -------- | ---------- | --------------------------------------------------------------------------------------- |
| characters       | `number` | `4`        | Number of character fields to display.                                                  |
| onChange         | `func`   | `() => {}` | Callback function that is called when the value of one of the character fields changes. |
| value            | `array`  | `[]`       | An array on numbers corresponding to each of the character fields.                      |
| leadingCharacter | `string` | `null`     | An optional character to display before the input.                                      |

In addition to these props, the component will also accept all the props supported by [MUI Textfields](https://mui.com/api/text-field/).

# Try it out

Just clone this repository and run the following commands to open a live demo:

**Using npm**

```bash
cd example
npm start
```

**Using Yarn**

```bash
cd example
yarn start
```

---
_Source: https://npm.io/package/@igloo_cloud/mui-otp-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._