https://github.com/ugogo/react-input-verification-code

A verification code input, autocompletion friendly
https://github.com/ugogo/react-input-verification-code

authentication code input pin-code react verification-code verify

Last synced: 5 days ago
JSON representation

A verification code input, autocompletion friendly

• Host: GitHub
• URL: https://github.com/ugogo/react-input-verification-code
• Owner: ugogo
• Created: 2020-06-18T17:08:09.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-07T18:23:32.000Z (3 months ago)
• Last Synced: 2024-12-14T07:06:41.842Z (12 days ago)
• Topics: authentication, code, input, pin-code, react, verification-code, verify
• Language: TypeScript
• Homepage: https://ugogo.github.io/react-input-verification-code
• Size: 3.28 MB
• Stars: 40
• Watchers: 4
• Forks: 18
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### **⚠️ This README is for the `v2` which is currently in beta release
The `v1` can been found [here](https://github.com/ugogo/react-input-verification-code/tree/1.0.2)**

---

# react-input-verification-code

A verification code input, mobile autocompletion friendly

[![NPM](https://img.shields.io/npm/v/react-input-verification-code.svg)](https://www.npmjs.com/package/react-input-verification-code) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Features

- Support native autocompletion when receiving a code via SMS

- Support pasted string

## Examples

- [Basic](https://codesandbox.io/s/basic-6ejdp)

- [Controllable](https://codesandbox.io/s/controllable-32dfy)

- [Custom Styles](https://codesandbox.io/s/custom-styles-bw8s4)

## peerDependencies

```

{

  "react": ">=16.0.0",

  "react-dom": ">=16.0.0"

}

```

## Install

```bash

yarn add react-input-verification-code

```

## Usage

```tsx

import React from 'react';

import ReactInputVerificationCode, {

  ReactInputVerificationCodeProps,

} from 'react-input-verification-code';

const customProps: ReactInputVerificationCodeProps = {

  autoFocus: true,

};

export default function App() {

  return ;

}

```

## API

### Props

| Key         | Type                                           | Default      | Required | Description                                        |

| ----------- | ---------------------------------------------- | ------------ | -------- | -------------------------------------------------- |

| autoFocus   | `boolean`                                      | false        | false    | Should focus on first render                       |

| inputProps  | `React.InputHTMLAttributes;` | `undefined`  | false    | Allow passing custom props into the inputs         |

| length      | `number`                                       | `4`          | false    | How many inputs will be rendered                   |

| onChange    | `function`                                     | `() => null` | false    | Function called when the value changes             |

| onCompleted | `function`                                     | `() => null` | false    | Function called when the value is completed        |

| placeholder | `string`                                       | `·`          | false    | Inputs placeholder                                 |

| value       | `string`                                       | `""`         | false    | Default value                                      |

| type        | `'alphanumeric, number'`                       | `number`     | false    | Should accepts alphanumeric values or only numbers |

### Custom Styles

Simply override the styles using the following classnames

```css

.ReactInputVerificationCode-container {

  /*  */

}

.ReactInputVerificationCode-item {

  /*  */

}

```

## License

MIT © [ugogo](https://github.com/ugogo)