Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱

Stars: ✭ 943 (+2673.53%)

Mutual labels: component

Wonders

🌈 Declarative JavaScript framework to build command-line applications.

Stars: ✭ 34 (+0%)

Mutual labels: component

Vue Share Buttons

🔗A set of social buttons for Vue.js

Stars: ✭ 34 (+0%)

Mutual labels: component

React Image Lightbox

React lightbox component

Stars: ✭ 956 (+2711.76%)

Mutual labels: component

View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 34

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (10) 🔗