Package Exports

react-pin-field

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pin-field) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React PIN Field

A React component for entering PIN codes.

gif

Live demo at https://react-pin-field.soywod.me.

Installation

yarn add react-pin-field
# or
npm install react-pin-field

Usage

import PinField from "react-pin-field"

Props

type PinFieldProps = {
  className?: string
  length?: number
  validate?: string | string[] | RegExp | ((key: string) => boolean)
  format?: (char: string) => string
  onResolveKey?: (key: string, ref?: HTMLInputElement) => any
  onRejectKey?: (key: string, ref?: HTMLInputElement) => any
  onChange?: (code: string) => void
  onComplete?: (code: string) => void
  style?: React.CSSProperties
} & React.InputHTMLAttributes<HTMLInputElement>

const defaultProps = {
  className: "",
  length: 5,
  validate: /^[a-zA-Z0-9]$/,
  format: key => key,
  onResolveKey: () => {},
  onRejectKey: () => {},
  onChange: () => {},
  onComplete: () => {},
  style: {},
}

Ref

You can control each inputs with the pin field ref:

<PinField ref={ref} data-cy="pin-field" />

// To reset the pin field
ref.current.forEach(input => (input.value = ""))

// To focus one particular input
ref.current[2].focus()

Style

React pin field follows the ABEM convention. Each input has a class named a-reactPinField__input, plus:

-{index} where index is the position of the input. Eg: -0 for the first input, -2 for the third etc.
-focus when the current input is focused.
-success when a key is resolved.
-error when a key is rejected.

You can also pass a custom className or a custom style.

Length

Length of the code (number of characters to type). Default: 5.

Validate

Hook called to validate a char. It can be:

A string of allowed characters: abcABC123
A list of allowed chars: ["a", "b", "c", "1", "2", "3"]
A RegExp: /^[a-zA-Z0-9]$/
A function: (char: string) => boolean

Format

Hook called before adding a new char to the code. For example, to set the code to upper case: (char: string) => char.toUpperCase()

Events

onResolveKey: called when a char passes successfully the validate function
onRejectKey: the opposite of onResolveKey
onChange: called when the code changes
onComplete: called when the code has been filled

Examples

See the live demo.

Development

git clone https://github.com/soywod/react-pin-field.git
cd react-pin-field
yarn install

To start the development server:

yarn start

To build the demo:

yarn build:demo

To build the lib:

yarn build:lib

Tests

Unit tests

Unit tests are handled by Jest (.test files) and Enzyme (.spec files).

yarn test:unit

End-to-end tests

End-to-end tests are handled by Cypress (.e2e files).

yarn start
yarn test:e2e

Changelog

See CHANGELOG.md

react-pin-field