zxqx / react-password-mask

Show/hide the contents of a password field.

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

react-password-mask's Issues

Add a custom Class for the Show/Hide Button

It's pretty hard to style it since it doesn't get any class on top of it, of course there is the inline styling, but this for example messes up with my external css styling.

Add autocomplete prop for the type[text] input

Title is self explanatory.
What do you say?

Why?

I don't want password recommendations when writing my password in open mode :)

Ability to tab to show/hide button

Use case: I want a user to be able to tab to the show/hide button
Desired behaviour: would be great if this was an option to turn on/off, currently hardcoded to -1. Once focussed pressing space should trigger the show/hide and keep focus on the show/hide.

Thanks.

Initial Hide/Show button props

It would be very helpful if I could define through a boolean props the initial state of the show/hide button. (hidden by default)

Thanks!

Online example

I just set this up to test it out, looks great!
https://stackblitz.com/edit/react-ucfs72?embed=1&file=index.js

Feel free to use/fork if you wanted to add an online example.

Thanks.

Can't specify onFocus event on input field

Set up example app dev server with hot reloading

How to make look like this

I styled my website using react bootstrap. I put the thing like this:

   <Form.Group controlId="password">
      <Form.Label>Password</Form.Label>
      <PasswordMask
        type="password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      ></PasswordMask>
    </Form.Group>

How can I make it look like the image below that is from my website https://creativeduoshop.herokuapp.com/login

Add Circle CI build

new release with show/hide button content

Add code coverage reporting

Update demo URL

Not able to set arbitrary props on the input field

I would like to add a data-attribute to the input field, however there's no way to add arbitrary attributes or props in the input field.

Write browser tests using mount

Write more tests

[DOM] Found 3 elements with non-unique id

how to add auto Focus (question)

Get webpack sourcemaps working for UMD build

Add Karma FF launcher

Children element not renders and wrapping div should be optional of choice

Wrapper div should be optional if not required to render if we just need input fields and show hide element. also found if we do something like label is ignored to be rendered.

<PasswordMask
  id="password"
  name="password"
  value={formData.password}
  onChange={handleChange}
  useVendorStyles={false}
  showButtonContent={<FontAwesomeIcon icon={faEyeSlash} />}
  hideButtonContent={<FontAwesomeIcon icon={faEye} />}
  inputClassName={`form-control form-control-sm `}
  onShow={() => {
    document.querySelector('.jdPasswordField').firstElementChild('div')
  }}
>
  <label htmlFor="password" className="form-label1">
    Password<sup>*</sup>
  </label>
</PasswordMask>

Below image with extra wrapping div, should be there, so that bootstrap floating label would work out of box!

Set up production build for example

Not able to set id via props for input element

This is previous issue , I am not able to receive id prop.

Add tests

Add precommit lint step

Add compile step for standalone bundle