This react component aims to improve common issues in password field UX.
27 |Inspect element to see all your password info with debug mode on!
38 | 39 |
43 | npm install react-ux-password-field
44 |
45 | View it on Github
46 |
50 | // use it like any other react component.
51 | // just require and place it inside your render function.
52 |
53 | var InputPassword = require('react-ux-password-field');
54 |
55 | ...
56 |
57 | render: function() {
58 | return (
59 | <InputPassword />
60 | )
61 | }
62 |
63 |
64 | * React UX Password Field is UMD compatible, meaning it will load with 65 | commonJS, AMD/RequireJS, or standalone.
66 |Add your attributes normally like you would any password field. (id, placeholder, required, pattern etc...) But now you get the following extras:
69 |77 |
infoBar={false}79 | You can still rely on the attributes in the container class to do any other logic including. 80 |
81 |93 |
zxcvbn={false}96 | You can also pass "debug" as your string and it will console.log the zxcvbn object returned on each password change. 97 |
98 |99 | Note: zxcvbn is loaded async as it is a pretty big file. The async load time usually isn't an issue for a password usecase, if it is. Consider disabling and moving to a server-side load. 100 |
101 | 102 |106 |
minScore={2}112 |
statusColor="#5CE592"118 |
statusInactiveColor="#FC6F6F"124 |
strengthLang={['Bad', 'Not good', 'Decent', 'Strong', 'Great']}130 |
changeCb={funcName}138 |
toggleMask={false}143 |
unMaskTime={1400}152 |
minLength={7}156 | You can also use all the default HTML5 input validation attributes, like maxLength, pattern, required etc... 157 |
158 | 159 |162 | Pull requests are welcomed, please file an issue explaining the problem you're solving first, and pull-request to an upstream branch instead of master. 163 |
164 | 165 |