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