Mui-passfather NPM

mui-passfather

mui-passfather is material-ui text field component allowing generate strong password or random string. To generate random string it uses passfather.

mui-passfather demo gif

Installation

NPM

npm install --save mui-passfather

Yarn

yarn add mui-passfather

Example

// Import react and other, you know...
import MuiPassfather from 'mui-passfather';

const App = () => {
  return (
    <MuiPassfather
      TextFieldProps={{
        type: 'text',
        variant: 'outlined',
        label: 'MUI Passfather',
      }}
      PassfatherOptions={{
        symbols: false,
        length: 10,
      }}
    />
  );
};

Full example is located inside example directory.

Properties

Name	Type	Default	Description
TextFieldProps	object	`{}`	Props applied to the TextField. component.
PassfatherOptions	object	`{}`	Passfather options.
VisibilityButtonProps,CopyToClipboardButtonProps,GenerateButtonProps	object	`{}`	Props applied to the IconButton. component.
AutorenewIconProps,VisibilityIconProps,VisibilityOffIconPropsFileCopyOutlinedIconProps	object	`{}`	Props applied to the Icon. component.
value	any	`''`	The value.
generateKey	number	`0`	The key to generate password programmatically. Pass `Date.now()` every time when needs generate new password programmatically.
hideGenerateButton	boolean	`false`	Hides generate button.
hideVisibilityButton	boolean	`false`	Hides visibility button.
hideCopyToClipboardButton	boolean	`false`	Hides copy to clipboard button button.
disableGenerateButtonDuration	boolean	`false`	Disable generate button animation.
onGenerate	function		Fires when password generated
onChange	function		Fires when the value change
onCopyToClipboard	function		Fires by press on copy to clipboard button
onCopyToClipboardFailed	function		Fires if cope to clipboard is failed
onToggleVisibility	function		Fires when visibility changed
renderVisibilityButton	function ({ isVisible, VisibilityButtonProps, VisibilityIconProps, VisibilityOffIconProps, handleToggleVisibility }) => ReactNode	null	Render custom visibility button
renderCopyToClipboardButton	function ({ copiedValue, CopyToClipboardButtonProps, FileCopyOutlinedIconProps, handleCopyToClipboard }) => ReactNode	null	Render custom copy to clipboard button
renderGenerateButton	function ({ handleGenerate, GenerateButtonProps, AutorenewIconProps }) => ReactNode	null	Render custom generate button