Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-pin-input

Package Overview
Dependencies
Maintainers
1
Versions
54
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-pin-input

React component for PIN like input

  • 1.3.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-pin-input

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

Build Status

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.

import PinInput from 'react-pin-input';

<PinInput 
  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_@./#&+-]*$/}
/>
AttributeTypeDescription
lengthnumberNumber of inputs
initialValuenumber|stringInitial value of inputs
typestringType of input allowed
if numeric, the input will take only numbers
if custom, the input will take other than numbers
secretbooleanIf you set the secret attibute, the input will be hidden as shown below.
secretDelaynumberIf you set the secret attibute, then you can optionally add secretDelay ms to hide the inputs as you type.
disabledbooleanIf you set the disable attibute, the input will be disabled.
focusbooleanSetting the focus attibute will set the default focus on the first input element.
onChangefunctionCallback 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
onCompletefunctionCallback 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
styleobjectStyle for the container div
inputStyleobjectStyle for the input element
inputFocusStyleobjectStyle for the input element when on focus
autoSelectbooleanSetting autoSelect to false will stop automatically highlighting input values on focus. This eliminates popup focus flashing on iOS.
regexCriteriaanyAdd validation for alphanumeric type. NOTE: default value is /^[ A-Za-z0-9_@./#&+-]*$/

Display when secret is set alt tag

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

Buy Me A Coffee

Keywords

FAQs

Package last updated on 01 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc