https://github.com/zxqx/react-password-mask
Show/hide the contents of a password field.
https://github.com/zxqx/react-password-mask
component react
Last synced: 11 months ago
JSON representation
Show/hide the contents of a password field.
- Host: GitHub
- URL: https://github.com/zxqx/react-password-mask
- Owner: zxqx
- Created: 2016-09-20T20:01:00.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-08-21T09:56:33.000Z (almost 2 years ago)
- Last Synced: 2025-06-30T14:51:12.908Z (about 1 year ago)
- Topics: component, react
- Language: JavaScript
- Homepage:
- Size: 638 KB
- Stars: 34
- Watchers: 3
- Forks: 21
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Password Mask
Show/hide the contents of a password field.
[](https://coveralls.io/github/zakangelle/react-password-mask?branch=master)
## 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