An password input with a configurable generator.

Props

The component takes the following props.

Prop	Type	Description
`onFocus`	function	Callback function to invoke when the input password field has focus. The function signature should be the following: `function(e) { }`.
`onBlur`	function	Callback function to invoke when field loses focus. The function signature should be the following: `function(e) { }`.
`className`	string	Class name to be added to the wrapper div
`messages`	object	You could define the string messages to be shown for `messages={{inputPlaceholder: 'Define the password', generateButtonLabel: 'Generate one!'}}`
`passwordCustomLength`	integer	The length of the password to be generated
`passwordNotMemorable`	boolean	If the password generated should be memorable. Default is false.
`passwordShouldMatchPattern`	string	The pattern to match for the generated password
`passwordPrefix`	string	Customize the generated password prefix

Installation

npm install react-password-with-generator

You have a demo here.

If you want the default styling include the components CSS with

import "react-password-with-generator/style.css" // for ES6 modules
// or
require("react-password-with-generator/style.css") // for CommonJS

npm install
npm run dev

npm run build

MIT