Skip to content
Show/hide the contents of a password field.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

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)}
/>

Unstyled Example

Use useVendorStyles={false} to disable the default CSS styles from the package. You can then style the component from scratch using inputStyles/buttonStyles or inputClassName/buttonClassName.

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

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 applied to the container.
inputClassName string A space-separated list of HTML class attributes, applied to the password field.
buttonClassName string A space-separated list of HTML class attributes, applied to the show/hide button.
placeholder string The HTML placeholder attribute used for the password field.
autoFocus boolean The HTML autofocus attribute used for the password field.
maxLength number The HTML maxlength 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.
onKeyDown function A callback function to be invoked when a key is pressed inside the input field. 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.
useVendorStyles boolean Whether the vendor styles of this package should be applied at all. Default: true
showButtonContent element, string The HTML content of the show button.
hideButtonContent element, string The HTML content of the 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

You can’t perform that action at this time.