A Simple React Pin Component inspired by React Pin Input. This has types included and is React v18 supported.

This allows for full customization on the input type rendered, meaning you can use any UI library to style your components.

Install

yarn add react-pin-component
npm install react-pin-component.

Pin Props

Property	Type	Description
length	number	Length of the pin
validate	Function	This function is used to validate the inputs and should return a boolean.
regexCriteria	RegExp	A regex string to check the input by.
initialValue	number | string	The initial value to be loaded into the pin input. This does not have to match the length property.
style	CSSProperties	Additional style properties to add or override to the pin component
focus	boolean	Choosing whether or not to focus on the first input when rendered
onChange	Function	This function outputs the current pin and a completed boolean.
addSplit	Object	Pass in {component: JSX.Element, every: number} to add a splitting character.
inputOptions	Object	See table below, this gives options to specify for the input element
InputComponent	ReactElement	Include a custom component or <input /> into here to choose what kind of input is rendered.

Input Options

Property	Type	Description
debug	boolean	Opt to include or hide console logs related to the validate and regex checks.
removeDefaultInputStyles	boolean	Removing the styles that come with this package on the input component
inputFocusStyle	CSSProperties	Custom styles that are only rendered when the input is in focus.

Example

import React from 'react';
import PinComponent from 'react-pin-component';

const MfaTokenInput = () => (
  <PinComponent

    // defined length for the pin. This will render a specific number of input boxes.
    length={6}

    // You can choose to take effect on the completed pin here, but also have access to the pin along the way.
    onChange={(pin, completed) => console.log({ pin, completed })}

    // Loading the initial value, but it's not required to be the same length as the pin itself.
    initialValue={87}

    // A simple function to check the values match. All values come out as strings.
    validate={(value) => Number(value) < 8}

    // Full regex strings supported. This will check if the number validates above AND if it passes the regex string
    // you do not need to use both, just different ways to use it.
    regexCriteria={/^[0-9]*$/}

    // styles for the entire pin component
    style={{
      backgroundColor: 'lightgrey',
    }}

    InputComponent={
      <input 
        style={{
          backgroundColor: 'darkgrey',
          borderRadius: '50%',
          margin: '5px',
        }}
        inputMode="numeric"
        pattern="^[a-zA-Z0-9]+$"
        autoComplete='off'
      />
    }

    inputOptions={{
      // styles to be send and shown only when an input box is in focus.
      inputFocusStyle: {
        border: '2px solid blue',
        // If you want to remove the browser focus outline set this.
        outline: 0,
      },
      debug: true
    }}

    // Adds a divider component into the pin input every 3 values.
    addSplit={{
      component: <h1>-</h1>,
      every: 5,
    }}
  />
);

export default MfaTokenInput;