{"bugs":{"url":"https://github.com/devfolioco/react-otp-input/issues"},"dist":{"shasum":"7d44cae90eac5aadb0d7526b05e2856e92a3eb21","tarball":"https://registry.npmjs.org/react-otp-input/-/react-otp-input-2.3.0-next.1.tgz","fileCount":17,"integrity":"sha512-sclYm20L/aIgLMgoD0vA70+BY50N64nVTBrLdCdnA/ItB72MQioKvUhOLlu1o3iVB6j1csMWBgLaPnqnbSRIwg==","signatures":[{"sig":"MEQCIDaSiJg8MWUwxULh0pEH/dG9tTf4Ek3a3fAu8caJo06zAiBCDQQzxNitTQ59VWy3k24QNViVBxPnkMvnZrNpwjlo4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnTteCRA9TVsSAnZWagAAboQP+wU+JDKgLZ2ozcKX2i5L\nsWJohIeNCTxbyvJuunRQlsg3eH0u/UOxwjSJYbWIr45m0Y610u7P17Nzn+o/\nj6+R/+hHvqb/cMrFFEovxtfd+0qQtBNwXQuT6fWAbhSHQd7ktadXovHDrDih\nBHvmUZTTMJ465/hXJULhaN5MnNxswTUwaWf+VmKLSG8hyODa38yTnsuT74gB\nKJYqbYNBcLOmJRs0jmoivDhwUMx9f+CZ+6sPk5n/WF0icw2E6uIn2WbsROFp\nnxO+JG1xCnCv8sZRI/s/E61n3wB/JxNqBvigyXMH4sKStPkEloHHxEqhi1iB\nQ/oFb196+n+NprNScmqLMbTS62H907MU2l5hP6wkt9PDfKenCMdTKSYyP7lj\nTgjEdOyCpFOuV/VaXxcINkS6fganoW7IKaPTB32bCgvN/I16bATw4NanEMva\nJkfuMg/HMNFW/cPqSP379VYxjB1k6PCUaCJ14sYX4eoXaTRIFPpqvHS9zT+Q\nqjnPc5tVf5VLskG9DAL1c5RKqh8qE4qMsxUSIG7bS+1E+AzxrJEf/aSoLXnH\ntcQeTByMewrIDUkSrRB1V/tv4zTNptpFHzdK1QQ/jcfdJrMOCC+ZhlixOsAw\nQEodkhJ2kmdP7l+ev1+JKPGW08LFzyBx6GsF7TadSnHUWbrFA0X3uWCgpFUZ\nK+fC\r\n=KUbj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"react-otp-input","author":{"name":"Ajay NS","email":"ajay.ns@outlook.com"},"readme":"# react-otp-input\n\n\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n\n\n\n[![npm version](https://badge.fury.io/js/react-otp-input.svg)](https://badge.fury.io/js/react-otp-input) [![npm](https://img.shields.io/npm/dw/react-otp-input.svg?logo=npm)](https://www.npmjs.com/package/react-otp-input)\n\nA fully customizable, one-time password input component for the web built with React.\n\n![see here](https://media.giphy.com/media/lN98dFU6h3oP0wWS5x/giphy.gif)\n\n[Live Demo](https://devfolioco.github.io/react-otp-input)\n\n[CodeSandbox](https://codesandbox.io/s/react-otp-input-demo-v2-1iy52)\n\n## Installation\n\n[![NPM](https://nodei.co/npm/react-otp-input.png?compact=true)](https://nodei.co/npm/react-otp-input/)\n\n#### To install the latest stable version:\n\n```\nnpm install --save react-otp-input\n```\n\n#### Basic usage:\n\n```jsx\nimport React, { Component } from 'react';\nimport OtpInput from 'react-otp-input';\n\nexport default class App extends Component {\n state = { otp: '' };\n\n handleChange = otp => this.setState({ otp });\n\n render() {\n return (\n -}\n />\n );\n }\n}\n```\n\n## API\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \t\t\n \t\t\n \t\t\n \t\t\n \t\t\n \t\t\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Name
TypeRequiredDefaultDescription
numInputsnumbertrue4Number of OTP inputs to be rendered.
onChangefunctiontrueconsole.logReturns OTP code typed in inputs.
valuestring / numbertrue''The value of the OTP passed into the component.
placeholderstringfalsenoneSpecify an expected value of each input. The length of this string should be equal to numInputs.
separatorcomponent
falsenoneProvide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input.
containerStylestyle (object) / className (string)falsenoneStyle applied or class passed to container of inputs.
inputStylestyle (object) / className (string)falsenoneStyle applied or class passed to each input.
focusStylestyle (object) / className (string)falsenoneStyle applied or class passed to inputs on focus.
isDisabledbooleanfalsefalseDisables all the inputs.
disabledStylestyle (object) / className (string)falsenoneStyle applied or class passed to each input when disabled.
hasErroredbooleanfalsefalseIndicates there is an error in the inputs.
errorStylestyle (object) / className (string)falsenoneStyle applied or class passed to each input when errored.
shouldAutoFocusbooleanfalsefalseAuto focuses input on initial page load.
isInputNumbooleanfalsefalseRestrict input to only numbers.
isInputSecurebooleanfalsefalseMasks input characters.
\n\n## Breaking changes when porting to v1.0.0\n\n`react-otp-input` is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For `v1.0.0` and above, a `value` prop needs to be passed in the component for it to function as expected.\n\n## Development\n\n#### To run the development server:\n\n```\nnpm run dev\n```\n\n## Checklist\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&logo=github)](https://github.com/devfolioco/react-otp-input/pulls) [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/devfolioco/react-otp-input)\n\n- [x] Add flowtypes\n- [x] Add ESLint, Prettier for code quality\n- [x] Add styling support for states including focus/disabled\n- [ ] Travis CI, Codecov\n- [ ] Write tests\n- [ ] Improve Documentation\n\n## Contributing\n\n[![GitHub issues](https://img.shields.io/github/issues-raw/devfolioco/react-otp-input?logo=github)](https://github.com/devfolioco/react-otp-input/issues) [![GitHub pull requests](https://img.shields.io/github/issues-pr/devfolioco/react-otp-input?logo=git)](https://github.com/devfolioco/react-otp-input/pulls)\n\nFeel free to open [issues](https://github.com/devfolioco/react-otp-input/issues/new/choose) and [pull requests](https://github.com/devfolioco/react-otp-input/pulls)!\n\n## License\n\n[![NPM](https://img.shields.io/npm/l/react-otp-input)](https://github.com/devfolioco/react-otp-input/blob/master/LICENSE)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Abhishek Warokar
💻 🎨 🚧 🤔 👀		\"\"/
Aj
💻 🎨 🤔		\"\"/
Aromal Anil
💻		\"\"/
Gabriele Corti
💻 ️️️️♿️
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","gitHead":"d9be606bc5b4da3955de52c822ed06f17f015b6f","license":"MIT","scripts":{"dev":"concurrently \"npm run build:watch\" \"npm run demo\"","demo":"webpack-dev-server --mode development","lint":"eslint '**/*.{js,jsx}' --quiet","test":"nyc mocha","build":"babel src/lib -d lib","deploy":"gh-pages -d demo","format":"prettier --write '**/*.{js,jsx}'","docz:dev":"docz dev","lint:fix":"eslint --fix 'src/**/*.{js,jsx}'","demo:prod":"webpack --mode production","predeploy":"npm run demo:prod","docz:build":"docz build","prepublish":"npm run build","build:watch":"babel src/lib -w -d lib","report-coverage":"nyc report --reporter=text-lcov > coverage.lcov && codecov"},"typings":"typings/index.d.ts","_npmUser":{"name":"abhibuilds","email":"abhishek@devfolio.co"},"homepage":"https://devfolioco.github.io/react-otp-input","keywords":[],"repository":{"url":"git+https://github.com/devfolioco/react-otp-input.git","type":"git"},"_npmVersion":"6.14.8","description":"A fully customizable, one-time password input component for the web built with React","directories":{},"maintainers":[{"name":"ajayns","email":"ajay.ns@outlook.com"},{"name":"abhibuilds","email":"abhishek@devfolio.co"}],"_nodeVersion":"14.13.0","dependencies":{},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"nyc":"^14.1.1","docz":"^2.3.1","mocha":"^6.2.2","react":"^16.10.1","eslint":"^4.19.1","webpack":"^4.35.0","flow-bin":"^0.73.0","gh-pages":"^1.2.0","prettier":"^1.18.2","babel-cli":"^6.26.0","react-dom":"^16.10.1","babel-core":"^6.26.3","css-loader":"^3.0.0","webpack-cli":"^3.3.12","babel-loader":"^7.1.5","concurrently":"^3.6.1","style-loader":"^0.21.0","babel-preset-env":"^1.7.0","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","webpack-dev-server":"^3.11.0","eslint-plugin-react":"^7.13.0","html-webpack-plugin":"^3.2.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.17.3","eslint-config-prettier":"^2.9.0","eslint-plugin-flowtype":"^2.49.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-prettier":"^2.6.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0"},"peerDependencies":{"react":"^16.2.0","react-dom":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-otp-input_2.3.0-next.1_1604139870511_0.0023529574569727263","host":"s3://npm-registry-packages"},"_id":"react-otp-input@2.3.0-next.1","version":"2.3.0-next.1"}