react-pin-input/README.md

React component for PIN like input

# react-pin-input

[![Build Status](https://travis-ci.org/arunghosh/react-pin-input.svg?branch=master)](https://travis-ci.org/arunghosh/react-pin-input)

**React component for PIN/MPIN like input**

![alt tag](https://github.com/arunghosh/react-pin-input/raw/master/docs/pin.png)


## Installation
```
npm install react-pin-input
```


## 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
<PinInput 
  length={4} 
  secret 
  onChange={(value, index) => {}} 
  type="numeric" 
  style={{padding: '10px'}}  
  inputStyle={{borderColor: 'red'}}
  inputFocusStyle={{borderColor: 'blue'}}
  onComplete={(value, index) => {}}
/>
```
|Attribute|Type|Description|
|:--|:--|:--|
|length|number|Number 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.
|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

Display when secret is set
![alt tag](https://github.com/arunghosh/react-pin-input/raw/master/docs/pin-secret.png)


## Additional APIs

```javascript
<PinInput length={4} ref={(n) => 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](https://github.com/arunghosh/react-pin-input/issues/4) ).

```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
```