# react-pin-input > React component for PIN like input Latest version **1.3.1** (published 2023-03-01) · MIT license · 0 weekly downloads ## Install ```sh npm install react-pin-input pnpm add react-pin-input yarn add react-pin-input bun add react-pin-input ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.1 | | Published | 2023-03-01 | | First published | 2017-03-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 81.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 112 | | Author | Arun Ghosh | | Maintainers | arunghosh | | Keywords | pin, input, react, component | ## Links - npm: https://www.npmjs.com/package/react-pin-input - Repository: https://github.com/arunghosh/react-pin-input - Homepage: https://github.com/arunghosh/react-pin-input#readme - Issues: https://github.com/arunghosh/react-pin-input/issues - npm.io page: https://npm.io/package/react-pin-input ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.3.1 (latest) — 2023-03-01 - 1.3.0 — 2022-07-27 - 1.2.1 — 2022-07-27 - 1.2.0 — 2022-06-16 - 1.1.0 — 2022-04-06 - 1.0.1 — 2020-10-03 - 1.0.0 — 2020-09-13 - 0.9.5 — 2020-09-05 - 0.9.4 — 2020-07-21 - 0.9.3 — 2020-07-06 - 0.9.2 — 2020-04-04 - 0.9.1 — 2020-03-14 - 0.9.0 — 2019-03-12 - 0.8.0 — 2018-12-01 - 0.7.0 — 2018-05-15 - … 39 more at https://npm.io/package/react-pin-input/versions ## README # react-pin-input _There is [another package](https://github.com/40818419/react-code-input) for managing PIN input. Check and see which suits you better._ [![Build Status](https://travis-ci.org/arunghosh/react-pin-input.svg?branch=master)](https://travis-ci.org/arunghosh/react-pin-input) **React-PIN-Input is a React component o capture PIN/MPIN like input** ![alt tag](https://github.com/arunghosh/react-pin-input/raw/master/docs/pin.png) ## Demo https://codesandbox.io/s/8jnlxw359 ## Installation ``` npm install react-pin-input --save ``` ## Usage The component takes in the length of the PIN and two callback to notifiy change and completion. The ```index``` is the input which is currently in focus. ```javascript import PinInput from 'react-pin-input'; {}} type="numeric" inputMode="number" style={{padding: '10px'}} inputStyle={{borderColor: 'red'}} inputFocusStyle={{borderColor: 'blue'}} onComplete={(value, index) => {}} autoSelect={true} regexCriteria={/^[ A-Za-z0-9_@./#&+-]*$/} /> ``` |Attribute|Type|Description| |:--|:--|:--| |length|number|Number of inputs| |initialValue|number\|string|Initial value of inputs| |type|string|Type of input allowed ||| if ```numeric```, the input will take only numbers| ||| if ```custom```, the input will take other than numbers| |secret|boolean|If you set the ```secret``` attibute, the input will be hidden as shown below. |secretDelay|number|If you set the ```secret``` attibute, then you can optionally add secretDelay ms to hide the inputs as you type. |disabled|boolean|If you set the ```disable``` attibute, the input will be disabled. |focus|boolean| Setting the ```focus``` attibute will set the default focus on the first input element. |onChange|function|Callback function invoked on input change. The first parameter is the value and the second is the index of the input that is currently in focus| |onComplete|function|Callback function invoked when all inputs have valid values. The first parameter is the value and the second is the index of the input that is currently in focus| |style|object|Style for the container `div` |inputStyle|object|Style for the input element |inputFocusStyle|object|Style for the input element when on focus |autoSelect|boolean|Setting ```autoSelect``` to ```false``` will stop automatically highlighting input values on focus. This eliminates popup focus flashing on iOS.| |regexCriteria|any|Add validation for ```alphanumeric``` type. *NOTE:* default value is /^[ A-Za-z0-9_@./#&+-]*$/ Display when secret is set ![alt tag](https://github.com/arunghosh/react-pin-input/raw/master/docs/pin-secret.png) ## Additional APIs ```javascript ele=n} /> ``` - ```ele.focus()``` to set focus on the first input element. - ```ele.clear``` to clear the values ## Custom Style You can update the style via following props - `style` - `inputStyle` - `inputFocusStyle` Or another option is to override the default style(shown below is scss. For css [refer](https://github.com/arunghosh/react-pin-input/issues/4) ). ```scss .pincode-input-container { .pincode-input-text { padding:0 !important; margin:0 2px; text-align:center; border: 1px solid; background: transparent; width: 50px; height: 50px; } .pincode-input-text:focus { outline:none; box-shadow:none; } } ``` ## For developers **New build** ``` npm run build ``` **Run dev server** ``` npm run dev ``` **Run test** ``` npm run test ``` Buy Me A Coffee --- _Source: https://npm.io/package/react-pin-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._