# react-codes-input [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-) [![npm version](https://badge.fury.io/js/react-codes-input.svg)](https://badge.fury.io/js/react-codes-input) ![Cdnjs](https://img.shields.io/cdnjs/v/react-codes-input) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-codes-input.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/edwardfxiao/react-codes-input/master/LICENSE) [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE) [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu) A react component for PIN, verify code and passcode entering. Online demo examples.

# Online Demo Online demo example Demo source code # Codesandbox Examples * Examples ### Version of ```16.8.6``` or higher of react and react-dom is required. ```js "peerDependencies": { "react": ">= 16.8.6", "react-dom": ">= 16.8.6" } ``` # Installation ```sh npm install react-codes-input --save ``` #### By CDN (starting from v2.2.0) ```html ...

``` # Donation Thanks for donating me a donut! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ # Browser support Tested on ~~IE9+~~ IE10+ and Chrome and Safari(10.0.3) This library uses ```require``` attribute of html input element, which not support IE9 from v2.1.0 # Docs |Props | |Type |Description |Default | |--- |--- |--- |--- | --- | |initialFocus | Opt | Bool |Options are ['false', 'true'] | false | |wrapperRef | Opt | React Ref | | none | |codeLength | Opt | Number | | 6 | |id | Opt | Str | | random ID | |onChange | Opt | Func |(value: string) => void | none | |type | Opt | Default |Options are ['alphanumeric', 'alpha', 'number']| "alphanumeric" | |letterCase | Opt | Str |Options are ['upper', 'lower', 'auto'] | "upper" | |value | Opt | Str | | "" | |disabled | Opt | Bool |Options are [false, true] | false | |hide | Opt | Bool |Options are [false, true] | false | |placeholder | Opt | Str | | "" | |focusColor | Opt | Str | | "#007bff" | |classNameComponent | Opt | Str | | "" | |classNameWrapper | Opt | Str | | "" | |classNameCodeWrapper | Opt | Str | | "" | |classNameEnteredValue | Opt | Str | | "" | |classNameCode | Opt | Str | | "" | |classNameCodeWrapperFocus | Opt | Str | | {} | |customStyleComponent | Opt | Obj | | {} | |customStyleWrapper | Opt | Obj | | {} | |customStyleCodeWrapper | Opt | Obj | | {} | |customStyleEnteredValue | Opt | Obj | | {} | |customStyleCode | Opt | Obj | | {} | |customStyleCodeWrapperFocus | Opt | Obj | | {} | |customStylePlaceholder | Opt | Obj | | {} | ```js import ReactCodesInput from 'react-codes-input'; import 'react-codes-input/lib/react-codes-input.min.css'; ``` ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Edward Xiao}
💻 📖 🚇 ⚠️ 👀

_bulhiCzar
💻 📖 🐛

_{Olena Mordas}
🐛

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!