React UX Password Field

Demo and full options: https://seethroughtrees.github.io/react-ux-password-field/

This react component aims to improve common issues in password field UX.

1. Password Strength Detection - Using Dropbox's zxcvbn library in real-time, onChange.
2. Timed Password Masking - Best explained in the nngroup article: Stop Password Masking
3. Stateful Class - Know the HTML5 validity of your field by class.

Install

npm install react-ux-password-field

Use

// use it like any other react component.
// just require and place it inside your render function.

var InputPassword = require('react-ux-password-field');

...

render: function() {
  return (
    <InputPassword />
  )
}

* React UX Password Field is UMD compatible, meaning it will load with commonJS, AMD/RequireJS, or standalone.

Options (props)

React UX Password Field will work fine with its defaults, but there is a lot of configuration options.

Read them on the site: https://seethroughtrees.github.io/react-ux-password-field/

Contributing

Pull requests are happily welcomed, please [https://github.com/seethroughtrees/react-ux-password-field/issues](create an issue) explaining the problem you're solving first, and pull-request to an upstream branch instead of master.