@kevincuadros/react-code v1.3.2

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

License

MIT