React-password-mask NPM

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.