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

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