React-mobile-style-password-input NPM

React mobile style password field

Password field with fading letters during input.

password field example

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

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.

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

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).

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

MIT

4 years ago

4 years ago