React Password Mask
Show/hide the contents of a password field.
Installation
$ npm install react-password-maskUsage
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
