React Password Mask

Show/hide the contents of a password field.

Installation

$ npm install react-password-mask

importPasswordMaskfrom'react-password-mask';

<PasswordMaskid="password"name="password"placeholder="Enter password"value={this.state.password}onChange={this.handleChange.bind(this)}/>

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.
`placeholder`	string	The HTML `placeholder` 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.
`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	The CSS styles to be applied to the password field.
`buttonStyles`	object	The CSS styles to be applied to the show/hide button.

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

MIT