react-otp-pin

Installation

npm install react-otp-pin --save

yarn add react-otp-pin

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.

<PinInput 
  length={4} 
  initialValue=""
  secret 
  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. |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

<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 ).

.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