React mobile style password field

Password field with fading letters during input.

Installation

$ npm install react-mobile-style-password-input

Usage

import InputPassword from 'react-mobile-style-password-input';

<InputPassword
    onPasswordChange={handlePasswordChange}
    name='password'
    type='password'
    placeholder='Input password'
/>

You can use all native input element props in standard way, exclude change field methods. Use onPasswordChange to get value.

Style component

You can style the component with usual way, wia className or style props.

Options

You can use all native input element props in standard way, but be aware of some changes below. All props are not required.

Option	Type	Default value	Description
onChange	function		A callback function to be invoked when the value of the field changes. Receives an argument containing the React SyntheticEvent object, but has an patterned string (not real password value). Use onPasswordChange instead
onPasswordChange	function		A callback function to be invoked when the value of the field changes. Receives an value of password input (string).
pattern	string	'•'	The letter which will be used for hiding password letters.
nameSuffix	string	'__masked'	Needs for generate masked (visible) password field name (value will be like name + nameSuffix)
inputRef	React.RefObject	new React.RefObject	Ref for masked (visible) password input.
type	string	'password'	Native type of HTMLInputElement for real (hidden) password input. Most case is use 'password' and 'text'.
name	string	'password'	Native name of HTMLInputElement for real (hidden) password input. Used for generate masked (visible) input name.
autoComplete	boolean	undefined	Native autoComplete of HTMLInputElement for both real (hidden) and masked (visible) password inputs.
letterFadeDuration	number	600	Delay before hiding inputted letter (ms).

Development and Demo

Install dependencies:

Fork the repo and then execute commands in the project folder:

$ npm install
$ npm run dev

Run the example page in your browser: /example/public/index.html

License

MIT