JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 22185
  • Score
    100M100P100Q139532F
  • License MIT

A React component for entering PIN codes.

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 Build Status

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: {},
}

Examples

Refer to the live demo to see the result.

Basic

<PinField />

With custom style

You can pass a custom className, a custom style, or override the CSS class .react-pin-field__input. You have also access to .react-pin-field__success when a key is resolved and .react-pin-field__input--error when a key is rejected.

<PinField
  style={{
    width: 50,
    height: 50,
    borderRadius: "50%",
    border: "1px solid gray",
    outline: "none",
    textAlign: "center",
    margin: 10,
  }}
/>

With custom length

<PinField length={3} />

With custom validation

<PinField validate="0123456789" />
<PinField validate={/^[0-9]$/} />
<PinField validate={key => "0123456789".indexOf(key) > -1} />

With custom events

  • onChange: when the code changes
  • onComplete: when the code has been filled
  • onResolveKey: when receive a good key
  • onRejectKey: when receive a bad key
<PinField
  onChange={handleChange}
  onComplete={handleComplete}
  onResolveKey={handleResolveKey}
  onRejectKey={handleRejectKey}
  format={k => k.toUpperCase()}
/>

With custom InputHTMLAttributes

<PinField type="password" autoFocus disabled={loading} />

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

TODO

End-to-end tests

End-to-end tests are handled by Cypress.

yarn start
yarn test:e2e

Changelog

See CHANGELOG.md

License

MIT - Copyright (c) 2019 Clément DOUIN