# react-password-mask > Show/hide the contents of a password field. Latest version **3.3.1** (published 2018-05-24) · MIT license · 0 weekly downloads ## Install ```sh npm install react-password-mask pnpm add react-password-mask yarn add react-password-mask bun add react-password-mask ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.3.1 | | Published | 2018-05-24 | | First published | 2016-09-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 42.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 34 | | Author | Zak Angelle | | Maintainers | zakangelle | | Keywords | react, component, show, hide, reveal, password, input, field, mask | ## Links - npm: https://www.npmjs.com/package/react-password-mask - Repository: https://github.com/zakangelle/react-password-mask - Homepage: https://github.com/zakangelle/react-password-mask#readme - Issues: https://github.com/zakangelle/react-password-mask/issues - npm.io page: https://npm.io/package/react-password-mask ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.3.1 (latest) — 2018-05-24 - 3.3.0 — 2018-01-12 - 3.2.0 — 2017-11-30 - 3.1.2 — 2017-11-14 - 3.1.1 — 2017-10-27 - 3.1.0 — 2017-10-27 - 3.0.0 — 2017-10-05 - 2.5.1 — 2017-09-25 - 2.4.6 — 2017-02-26 - 2.4.5 — 2017-02-25 - 2.4.4 — 2017-02-25 - 2.4.3 — 2017-02-25 - 2.4.2 — 2017-02-25 - 2.4.1 — 2017-02-25 - 2.4.0 — 2017-02-25 - … 23 more at https://npm.io/package/react-password-mask/versions ## README # React Password Mask Show/hide the contents of a password field. [![Circle CI](https://circleci.com/gh/zakangelle/react-password-mask/tree/master.svg?style=shield)](https://circleci.com/gh/zakangelle/react-password-mask/tree/master) [![Coverage Status](https://img.shields.io/coveralls/zakangelle/react-password-mask.svg)](https://coveralls.io/github/zakangelle/react-password-mask?branch=master) [![See Demo](https://img.shields.io/badge/see-demo-4842f4.svg)](https://zakang.name/react-password-mask/) ## Installation ```sh $ npm install react-password-mask ``` ## Usage ```js import PasswordMask from 'react-password-mask'; ``` ```js ``` ### 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`. ```js ``` ## 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](http://localhost:8080): ``` $ npm run example ``` Run tests using [jest](https://github.com/facebook/jest): ``` $ npm test ``` Update test snapshots: ``` $ npm run test:update ``` Run tests and watch for code changes: ``` $ npm run test:watch ``` ## License MIT --- _Source: https://npm.io/package/react-password-mask · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._