react-pin-input

_There is another package for managing PIN input. Check and see which suits you better._


React-PIN-Input is a React component o capture PIN/MPIN like input

!alt tag

Demo

https://codesandbox.io/s/8jnlxw359

Installation

``
npm install react-pin-input --save
`

Usage

The component takes in the length of the PIN and two callback to notifiy change and completion. The `index` is the input which is currently in focus.

`javascript
import PinInput from 'react-pin-input';

length={4}
initialValue=""
secret
secretDelay={100}
onChange={(value, index) => {}}
type="numeric"
inputMode="number"
style={{padding: '10px'}}
inputStyle={{borderColor: 'red'}}
inputFocusStyle={{borderColor: 'blue'}}
onComplete={(value, index) => {}}
autoSelect={true}
regexCriteria={/^[ A-Za-z0-9_@./#&+-]*$/}
/>
`
|Attribute|Type|Description|
|:--|:--|:--|
|length|number|Number of inputs|
|initialValue|number\|string|Initial value of inputs|
|type|string|Type of input allowed
||| if `numeric`, the input will take only numbers|
||| if `custom`, the input will take other than numbers|
|secret|boolean|If you set the `secret` attibute, the input will be hidden as shown below.
|secretDelay|number|If you set the `secret` attibute, then you can optionally add secretDelay ms to hide the inputs as you type.
|disabled|boolean|If you set the `disable` attibute, the input will be disabled.
|focus|boolean| Setting the `focus` attibute will set the default focus on the first input element.
|onChange|function|Callback function invoked on input change. The first parameter is the value and the second is the index of the input that is currently in focus|
|onComplete|function|Callback function invoked when all inputs have valid values. The first parameter is the value and the second is the index of the input that is currently in focus|
|style|object|Style for the container div
|inputStyle|object|Style for the input element
|inputFocusStyle|object|Style for the input element when on focus
|autoSelect|boolean|Setting `autoSelect` to `false` will stop automatically highlighting input values on focus. This eliminates popup focus flashing on iOS.|
|regexCriteria|any|Add validation for `alphanumeric` type. NOTE: default value is /^[ A-Za-z0-9_@./#&+-]*$/

Display when secret is set
!alt tag




Additional APIs

`javascript
ele=n} />
`
- `ele.focus()` to set focus on the first input element.
- `ele.clear` to clear the values

Custom Style

You can update the style via following props
- style
- inputStyle
- inputFocusStyle

Or another option is to override the default style(shown below is scss. For css refer ).

`scss
.pincode-input-container
{
.pincode-input-text
{
padding:0 !important;
margin:0 2px;
text-align:center;
border: 1px solid;
background: transparent;
width: 50px;
height: 50px;
}
.pincode-input-text:focus
{
outline:none;
box-shadow:none;
}
}
`




For developers

New build
`
npm run build
`

Run dev server
`
npm run dev
`

Run test
`
npm run test
``