{"_id":"@dj98/stores-password-checklist","name":"@dj98/stores-password-checklist","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dj98/stores-password-checklist","version":"1.0.0","keywords":["password","strength","indicator","meter","validator","validation","form","signup","account","creation","signin","react","checker","strong","capital","number","symbol","length","create account","password reset","check password strength","password strength checker","strength checker","password checker","password checker strength","strength password checker","check-password-strength","password-strength-checker","strength-checker","password-checker","password-checker-strength","strength-password-checker","pass-strength"],"description":"A React Component to display the success or failure of password strength rules, ideal for registration or password reset forms.","public":true,"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","build-storybook":"build-storybook","coveralls":"jest --coverage && cat ./coverage/lcov.info | coveralls","prepare":"npm run build","start":"npm run storybook","storybook":"start-storybook -p 9009","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage --colors"},"repository":{"type":"git","url":"git+https://github.com/sators/react-password-checklist.git"},"author":{"name":"Sators","email":"sators@sators.com"},"license":"MIT","bugs":{"url":"https://github.com/sators/react-password-checklist/issues"},"homepage":"https://github.com/sators/react-password-checklist#readme","dependencies":{},"peerDependencies":{"react":">16.0.0-alpha || >17.0.0-alpha || >18.0.0-alpha"},"devDependencies":{"@babel/plugin-syntax-logical-assignment-operators":"^7.10.4","@pxblue/storybook-rtl-addon":"^1.1.0","@storybook/addon-actions":"^6.4.9","@storybook/addon-knobs":"^6.2.8","@storybook/react":"^6.4.9","@types/enzyme":"^3.10.5","@types/enzyme-adapter-react-16":"^1.0.6","@types/jest":"^26.0.9","@types/storybook__addon-knobs":"^5.2.1","@types/storybook__react":"^5.2.1","babel-loader":"^8.1.0","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-regenerator":"^0.2.2","babel-preset-react-app":"^9.1.2","coveralls":"^3.1.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.3","jest":"^26.2.2","react":"^16.8.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.8.0","ts-jest":"^26.1.4","ts-loader":"^8.0.2","typescript":"^4.7.4"},"gitHead":"a9966e2327edb71258e7797b36e478063be2c246","_id":"@dj98/stores-password-checklist@1.0.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-q48FYJkXp1MFU2cfRkoQoc2dAJrxW6keMaJoBOirnbUyCdJ8tZBGwIk2/YTAiCNVDk2peeQoMT2fBOmtmM6Xcg==","shasum":"30b82fdb8f8509c13aa1743286a6552461b9a380","tarball":"https://registry.npmjs.org/@dj98/stores-password-checklist/-/stores-password-checklist-1.0.0.tgz","fileCount":5,"unpackedSize":23899,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHapv8TsOkjXE8TtB+QEqzCdhAk64uwn9tAq56+gVzlKAiEArE70i6iG/5GwZxAikZ9TkH84olnPhu/NUMULJTH4VrA="}]},"_npmUser":{"name":"dj98","email":"damianjakubas98@gmail.com"},"directories":{},"maintainers":[{"name":"dj98","email":"damianjakubas98@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stores-password-checklist_1.0.0_1715091138200_0.6344609678200215"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-07T14:12:18.099Z","1.0.0":"2024-05-07T14:12:18.443Z","modified":"2024-05-07T14:12:18.768Z"},"maintainers":[{"name":"dj98","email":"damianjakubas98@gmail.com"}],"description":"A React Component to display the success or failure of password strength rules, ideal for registration or password reset forms.","homepage":"https://github.com/sators/react-password-checklist#readme","keywords":["password","strength","indicator","meter","validator","validation","form","signup","account","creation","signin","react","checker","strong","capital","number","symbol","length","create account","password reset","check password strength","password strength checker","strength checker","password checker","password checker strength","strength password checker","check-password-strength","password-strength-checker","strength-checker","password-checker","password-checker-strength","strength-password-checker","pass-strength"],"repository":{"type":"git","url":"git+https://github.com/sators/react-password-checklist.git"},"author":{"name":"Sators","email":"sators@sators.com"},"bugs":{"url":"https://github.com/sators/react-password-checklist/issues"},"license":"MIT","readme":"# React Password Checklist\n\n[](https://www.npmjs.com/package/react-password-checklist)   \n
[](https://app.travis-ci.com/github/sators/react-password-checklist) [](https://coveralls.io/github/sators/react-password-checklist?branch=master) [](https://github.com/sators/react-password-checklist/issues) [](https://github.com/sators/react-password-checklist/pulls) [](https://twitter.com/sators)\n\nA React Component to display the success or failure of password strength rules that updates as a user types.\n\n## Example\n\n\n\n## Install in your project\n\n`npm install --save react-password-checklist`\n\n`yarn add react-password-checklist`\n\n_Note: react is a peer dependency. You should be using this in a React project._\n\n## Example Usage\n\n```\nimport React, {useState} from \"react\"\nimport PasswordChecklist from \"react-password-checklist\"\n\nconst SignUp = () => {\n\tconst [password, setPassword] = useState(\"\")\n\tconst [passwordAgain, setPasswordAgain] = useState(\"\")\n\treturn (\n\t\t\n\t)\n}\n```\n\n### Custom Messages/Translations\n\n```\nimport React, {useState} from \"react\"\nimport PasswordChecklist from \"react-password-checklist\"\n\nconst SignUp = () => {\n\tconst [password, setPassword] = useState(\"\")\n\tconst [passwordAgain, setPasswordAgain] = useState(\"\")\n\treturn (\n\t\t\n\t)\n}\n```\n\n## Available Rules\n\nCustomize the component to display only the rules you need in the desired order you wish to display them.\n\n#### minLength\n\nValid if the password meets the minimum length. Requires `minLength` prop to be included.\n\n#### maxLength\n\nValid if the password meets the maximum length. Requires `maxLength` prop to be included.\n\n#### specialChar\n\nValid if the password contains a special character from [this list](https://github.com/sators/react-password-checklist/blob/master/src/index.tsx#L60).\n\n#### number\n\nValid if the password contains a number.\n\n#### capital\n\nValid if the password contains a capital letter.\n\n#### match\n\nValid if the password matches the confirm password valid. Requires `valueAgain` prop to be included.\n\n#### letter\n\nValid if the password contains a letter (capital or lowercase)\n\n#### lowercase\n\nValid if the password contains a lowercase letter\n\n#### notEmpty\n\nValid if the password and confirm passwords both contain any character. Requires `valueAgain` prop to be included.\n\n## Props\n\n| Prop | Description | Type | Required | Default |\n| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------- | ------------------------------------------------------------- |\n| rules | Rules to display in the order desired.
Options are `minLength`, `maxLength`, `specialChar`,
`number`, `letter`, `capital`, `match`,
`lowercase`, `notEmpty` | array | yes |\n| value | Current potential password | string | yes |\n| valueAgain | Current potential password confirmation | string | Only with
`match` rule |\n| minLength | Minimum Password Length | number | Only with
`minLength` rule |\n| maxLength | Maximum Password Length | number | Only with
`maxLength` rule |\n| specialCharsRegex | Regular expression to be used to validate the specialChars rule | RegExp | | `` /[~`¿¡!#$%\\^&*€£@+÷=\\-\\[\\]\\\\';,/{}\\(\\)\\|\\\\\":<>\\?\\.\\_]/g `` |\n| onChange | Callback that is triggered when the
validity of any rule changes. | function | | `(isValid: boolean, failedRules: string[]) => {}` |\n| messages | Object with keys as rules, and values as strings to use as the message to be displayed | object | |\n| className | Class applied to the entire component | string | |\n| rtl | apply rtl styles | boolean | | false |\n| hideIcon | Remove the SVG icon element | boolean | | false |\n| style | Inline styles applied to the
outer component wrapper | object | |\n| iconSize | Size of ✔ or 𐄂 icon | number | | `18` |\n| validTextColor | Color of valid text | string | | Inherited color |\n| invalidTextColor | Color of invalid text | string | | Inherited color opacity 0.5 |\n| validColor | Color of checkmark icon. Not used with custom `iconComponents` | string | | `#4BCA81` |\n| invalidColor | Color of X icon. Not used with custom `iconComponents` | string | | `#FF0033` |\n| iconComponents | Optional object containing keys of `ValidIcon` and `InvalidIcon` with a React Node to be displayed in place of icon. Both icons required if used. Example: `{ValidIcon: ![](\"valid.png\")
, InvalidIcon: ![](\"invalid.png\")
}` | object | | |\n\n## Available Classes\n\n- `.valid` - Valid Message\n- `.invalid` - Invalid Message\n\n## Contributing\n\nPRs are welcome for additional functionality! See the Run Locally section below. Pull requests should include unit tests and potentially storybook stories to cover the updates. Thanks!\n\n## Run Locally\n\n`yarn` to install dependencies.\n\n`yarn storybook`\n","readmeFilename":"README.md"}