Pin input built with React component and styled-components. 

Pin input built with React component and styled-components

luffy84217

react-input-pin-code

  "description": "Pin input built with React component and styled-components",

    "url": "git://github.com/luffy84217/react-input-pin-code.git"

  "homepage": "https://luffy84217.github.io/react-input-pin-code/",

    "format:check": "prettier --check .",

    "storybook": "start-storybook -p 6006",

    "postrelease": "git push && git push --follow-tags && npm run build",

    "build-storybook": "build-storybook",

    "deploy-storybook": "storybook-to-ghpages",

    "validate": "npm run typecheck && npm run build && npm run lint && npm test -- --coverage"

    "@babel/plugin-transform-runtime": "^7.16.4",

    "@rollup/plugin-commonjs": "^21.0.0",

    "@rollup/plugin-node-resolve": "^13.0.5",

    "@storybook/addon-actions": "^6.3.11",

    "@storybook/addon-essentials": "^6.3.11",

    "@storybook/storybook-deployer": "^2.8.10",

    "@testing-library/jest-dom": "^5.15.1",

    "@types/react-test-renderer": "^17.0.1",

    "@types/styled-components": "^5.1.15",

    "@typescript-eslint/eslint-plugin": "^4.33.0",

    "@typescript-eslint/parser": "^4.33.0",

    "babel-plugin-styled-components": "^1.13.3",

    "eslint-plugin-react-hooks": "^4.2.0",

    "rollup-plugin-peer-deps-external": "^2.2.4",

    "rollup-plugin-typescript2": "^0.30.0",

[![Validate](https://github.com/luffy84217/react-input-pin-code/actions/workflows/validate.yml/badge.svg)](https://github.com/luffy84217/react-input-pin-code/actions/workflows/validate.yml)

[![CircleCI](https://circleci.com/gh/luffy84217/react-input-pin-code/tree/main.svg?style=shield)](https://circleci.com/gh/luffy84217/react-input-pin-code/tree/main)

[![Build Status](https://app.travis-ci.com/luffy84217/react-input-pin-code.svg?branch=main)](https://app.travis-ci.com/luffy84217/react-input-pin-code)

[![codecov](https://codecov.io/gh/luffy84217/react-input-pin-code/branch/main/graph/badge.svg?token=QSHM2A3C5V)](https://codecov.io/gh/luffy84217/react-input-pin-code)

![npm](https://img.shields.io/npm/v/react-input-pin-code)

![NPM](https://img.shields.io/npm/l/react-input-pin-code)

[![storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://luffy84217.github.io/react-input-pin-code/)

> An accessible and simple pin input component built with styled-components for ReactJS.

![image](https://user-images.githubusercontent.com/28497046/147468428-b1bb0e98-70a3-4874-b9e8-b9701fdb2781.png)

[Here](https://luffy84217.github.io/react-input-pin-code/) to see documentation and examples.

Source code at https://github.com/luffy84217/react-input-pin-code.

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

npm install react-input-pin-code styled-components

yarn add react-input-pin-code styled-components

Please note that [styled-components](https://styled-components.com/) is peer dependency.

You can use the following two ways to import module.

import { PinInput } from 'react-input-pin-code' // ES Module

var PinInput = require('react-input-pin-code').PinInput // CommonJS Module

import { PinInput } from 'react-input-pin-code';

  const [values, setValues] = React.useState(['', '', '']);

      onChange={(value, index, values) => setValues(values)}

Filling one character at a time for each input. When a character is entered, the focus transfers to the next input automatically in the sequence until all inputs are filled in. Here is the explanation of behavior below:

* You can fill in only one character per input.

* To overwrite the value of an input, you donʼt need to select the text in the input. If you type a digit while the input is focused, the input will update.

* Pressing `Backspace` when it is empty in the input will move focus to the previous input (if any) and clear the value of.

`PinInput` expects an array of strings for the `values` prop. The number of input fields rendered is equal to the length of the array.

You can pass `id` or `name` prop. name will be shared amongst the inputs, which means they will each have their name set to this value. id will append an index to any string you provide and pass to the corresponding input. For example, if you pass foo as id and bar as name and there are four inputs, the resulting ids are **foo-0**, **foo-1**, **foo-2**, and **foo-3** and each input has the name bar.

You can control the size of the inputs with the `size` prop. It comes in four sizes.

| :------------: |---------------:| -----:|

| xs | 1.5rem (24px) | 0.75rem (12px)    |

| sm | 2rem (32px)   |   0.875rem (14px) |

| md | 2.5rem (40px) |    1rem (16px)    |

| lg | 3rem (48px)   |    1.125rem (18px)|

By default, the `PinInput` is passed **number** as `type` prop so it accepts only numeric values to show up. To add support for alphanumeric values, pass the `type` prop and set its value to either **text** or **number**.

`PinInput` provides `validate` prop to specify native attribute `pattern`, which is a regular expression which the input's value must match in order for the value to pass [constraint validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation).

`Format` prop specify a pure function to transform raw input. For example, to set the values to upper case: 

You can pass `validate` prop to validate input values, if value of the input doesn't match test, it will show error border instantly enter, while it will only show valid border after all inputs are filled in and pass validation.

You can disable this behavior by setting `showState` prop to **false**.

You can set `mask` prop to **true** to prevent from showing input values. It is equivalent to setting input native attribute `type` to **password**.

By default, `PinInput` 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.

To disable this behavior, set `autoTab` prop to **false**

`PinInput` 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.

`PinInput` provides `onComplete` event handler to access input values, unlike `onChange`, `onComplete` only triggers when all inputs are filled in.

> **NOTICE** if you offer a list of allowed characters to `validate` prop, `onComplete` will trigger ony when all input values pass validation.

By default, `PinInput` placeholder is (○), you can change that if you want.

| errorBorderColor | string |  | Let you customize border color when the input is invalid.

| focusBorderColor | string |  | Let you customize border color when the input is focused.

| validBorderColor | string |  | Let you customize border color when the input is valid.

| borderColor | string | rgb(204,204,204) | Let you customize border color when the input is not focused.

| errorBorderColor | string | rgb(220,53,69) | Let you customize border color when the input is invalid.

| focusBorderColor | string | rgb(13,110,253) | Let you customize border color when the input is focused.

| validBorderColor | string | rgb(25,135,84) | Let you customize border color when the input is valid.

| inputMode | string |  | This attribute allows a browser to display an appropriate virtual keyboard. (**NOTE** `type` prop will determine appropriate `inputMode` automatically. if you pass `inputMode` prop, it will override built-in `inputMode`.) |

| onBlur | (event: React.FocusEvent) => void |  | Called the onBlur event triggers.

| containerStyle | object | {} | Lets you customize container element. |

| inputStyle | object | {} | Lets you customize input element. |

| validate | string &#124; string[] &#124; RegExp |  | A regular expression which the input's value must match in order for the value to pass [constraint validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation). |

| :------------ |:--------- | :------| :-----|

		{
		"name": "react-input-pin-code",
		"version": "1.1.0",
		"version": "1.1.1",
		"description": "Pin input built with React component and styled-components",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

		@@ -15,2 +15,4 @@ # React Input Pin Code

		![image](https://user-images.githubusercontent.com/28497046/147468428-b1bb0e98-70a3-4874-b9e8-b9701fdb2781.png)

		[Here](https://luffy84217.github.io/react-input-pin-code/) to see documentation and examples.
		@@ -26,3 +28,5 @@
		npm install react-input-pin-code styled-components
		```
		or
		```bash
		yarn add react-input-pin-code styled-components
		@@ -163,5 +167,6 @@ ```
		\| autoTab \| boolean \| true \| If true focus will move automatically to the next/previous input once filled or deleted \|
		\| errorBorderColor \| string \| \| Let you customize border color when the input is invalid.
		\| focusBorderColor \| string \| \| Let you customize border color when the input is focused.
		\| validBorderColor \| string \| \| Let you customize border color when the input is valid.
		\| borderColor \| string \| rgb(204,204,204) \| Let you customize border color when the input is not focused.
		\| errorBorderColor \| string \| rgb(220,53,69) \| Let you customize border color when the input is invalid.
		\| focusBorderColor \| string \| rgb(13,110,253) \| Let you customize border color when the input is focused.
		\| validBorderColor \| string \| rgb(25,135,84) \| Let you customize border color when the input is valid.
		\| disabled \| boolean \| \| Renders component in disabled state. \|
		@@ -168,0 +173,0 @@ \| format \| (char: string) => string \| \| Pure function to transform raw input. \|

Improved metrics