react-ux-password-field

A UX forward password field for react-js

Usage no npm install needed!

<script type="module">
  import reactUxPasswordField from 'https://cdn.skypack.dev/react-ux-password-field';
</script>

README

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.