https://github.com/arunghosh/react-pin-input
React PIN / OTP input component
https://github.com/arunghosh/react-pin-input
input mpin otp pin react
Last synced: 6 months ago
JSON representation
React PIN / OTP input component
- Host: GitHub
- URL: https://github.com/arunghosh/react-pin-input
- Owner: arunghosh
- License: mit
- Created: 2017-03-06T04:18:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-08-24T09:43:55.000Z (about 2 years ago)
- Last Synced: 2025-03-29T02:03:44.224Z (6 months ago)
- Topics: input, mpin, otp, pin, react
- Language: JavaScript
- Homepage:
- Size: 1.46 MB
- Stars: 109
- Watchers: 2
- Forks: 45
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-pin-input
_There is [another package](https://github.com/40818419/react-code-input) for managing PIN input. Check and see which suits you better._
**React-PIN-Input is a React component o capture PIN/MPIN like input**
## 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';
{}}
type="numeric"
inputMode="numeric"
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
## 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](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
```
