React Pin Widget

An easy to use Pin Component for React.

---

Installation

Using npm:

npm i --save react-pin-widget

---

Using yarn:

yarn add react-pin-widget

---

Usage

import ReactPin from 'react-pin-widget'

---

Properties

length: Number (Default: 6) (optional)

It is the number of pin input.

<ReactPin length={5} />

---

type: string (optional)

It is the type of input.

<ReactPin type='alphabet'/>

Values accepted

1. numeric (Default): Accepts numbers only
2. alphaNumeric: Accepts both alphabets and numbers
3. alphabet: Accepts alphabets only
4. numericPassword: Password type, accepts numbers only
5. alphaNumericPassword: Password type, accepts both alphabets and numbers

---

inputClass: string (optional)

Used to style pin inputs

---

onFill: function(optional)

emits and event on every key input.

const fillHandler = (val) => {
  console.log(val)
}

<ReactPin onFill={fillHandler}/>

---

Demo

https://react-components-playground.vercel.app/react-pin

Author: github.com/M-Blaze
Link to package: https://www.npmjs.com/package/react-pin-widget
Link to repository: https://github.com/M-Blaze/react-pin-widget