React Password Mask

Show/hide the contents of a password field.

Installation

$ npm install react-password-mask

Usage

import PasswordMask from 'react-password-mask';

<PasswordMask
  id="password"
  name="password"
  placeholder="Enter password"
  value={this.state.password}
  onChange={this.handleChange.bind(this)}
/>

Options

option	type	description
value	any	The value of the password field.
id	string	The HTML id attribute used for the password field.
name	string	The HTML name attribute used for the password field.
className	string	A space-separated list of HTML class attributes.
placeholder	string	The HTML placeholder attribute used for the password field.
onChange	function	A callback function to be invoked when the value of the field changes. Receives an argument containing the React SyntheticEvent object.
onShow	function	A callback function to be invoked when the value of the field is shown. Receives an argument containing the current value of the field.
onHide	function	A callback function to be invoked when the value of the field is masked. Receives an argument containing the current value of the field.
onToggle	function	A callback function to be invoked when the value of the field is shown or masked. Receives an argument containing the current value of the field.
inputStyles	object	The CSS styles to be applied to the password field.
buttonStyles	object	The CSS styles to be applied to the show/hide button.

Development

Install dependencies:

$ npm install

Run the example app at http://localhost:8080:

$ npm run example

Run tests using jest:

$ npm test

Update test snapshots:

$ npm run test:update

Run tests and watch for code changes:

$ npm run test:watch

License

MIT