mui-passfather

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

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

Contributing

See contributing guideline.

License

MIT LICENSE