react-custom-password-mask

React Custom Password Mask

The idea is to make it a drop in replacement for <input type="password"/> while being able to use any masking char (instead of the default bullet.)

Install

npm install react-custom-password-mask --save

Usage

import React from 'react';
import serialize from 'form-serialize';
import CustomMaskedPassword from 'react-custom-password-mask';

export default React.createClass({

  submitHandler(event) {
    event.preventDefault();

    // Using ref: secret
    console.log("Using ref:", this.refs.pswd.value);

    // From form: password=secret
    console.log("From form:", serialize(this.refs.form));
  },

  render() {
    return (
      <form ref="form" onSubmit={this.submitHandler}>
        <CustomMaskedPassword ref="pswd" name="password" mask="X"/>
        <button>Submit</button>
      </form>
    );
  }

}); 

You can also use multibyte chars:

<MaskInput mask="💩"/>