React Pin Code

Pin input component for React

Installation

To get started, install and save in your package.json dependencies, run:

npm i @kevincuadros/react-code

or

yarn add @kevincuadros/react-code

Demo

Documentation and examples

Source code

Importing

You can use the following two ways to import module.

import { PinCode } from '@kevincuadros/react-code'

Usage

Basic Example

import { PinCode } from '@kevincuadros/react-code';

const App = () => {
  
  const [value, setValue] = React.useState('');

  return (
    <PinCode
      length={4}
      onChange={setValue}
    />
  );
};

PinCode input length

PinCode expects a number for the length prop. The number of input fields rendered is equal to the length of the array.

Disable focus management

By default, PinCode moves focus automatically to the next input once a field is filled. It also transfers focus to a previous input when Backspace is pressed with focus on an empty input.

AutoFocus

PinCode offers a way let it focus from the start. Simply set autoFocus prop to true to focus the first input upon initial mounting of the component.

Changing the placeholder

By default, PinCode placeholder is (''), you can change that if you want.

Compare value

By default valueToValidate is (''), when all the fields are completed the value will be validated

API

PinCode Props

Name(*required)	Type	Default	Description
length(*)	number		Number of rendered elements.
autoFocus	boolean	false	If true the input will be focused on the first mount.
valueToValidate	string	""	Value to compare
invalidBorderColor	string	rgb(220,53,69)	Let you customize border color when the input is invalid.
validBorderColor	string	rgb(220,53,69)	Let you customize border color when the input is valid.
onChange	Dispatch<React.SetStateAction>		Called when input value is changed.
placeholder	string	""	Displayed when the pin code is not entered yet.
inputStyle	object	{}	Lets you customize input element.

License

MIT