/react-password-mask

Show/hide the contents of a password field.

Primary LanguageJavaScript

React Password Mask

Show/hide the contents of a password field.

Circle CI Coverage Status See Demo

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 Inline CSS styles to be applied to the password field.
buttonStyles object Inline CSS styles to be applied to the show/hide button.
showButtonContent element string
hideButtonContent element string

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