antd-password-input-strength

> Antd Input Component with password-strength indicator.

!Preview GIF

Features

- Drop-in replacement for antd's Input component
- Customizable
- Uses tai-password-strength for password strength estimation

_Note: tai-password-strength is a rather large library. Use code splitting to only load the library when necessary._

Install

``bash
npm install --save antd-password-input-strength
`

or

`bash
yarn add --save antd-password-input-strength
`

_Note: antd and react/react-dom are peer dependencies. You should only use this library in a React/AntD project._

Usage

Use as a drop-in replacement for antd's Input:

`tsx









`

With `Form.create()`:

`tsx




{this.props.form.getFieldDecorator("password", {
rules: [{
required: true,
message: "Please enter your password"
}]
})()}




`

With custom settings:

`tsx




settings={{
...defaultSettings,
height: 5
}}

onChange={() => console.log("Changed")}
size="large"
/>




`

With validation:

`tsx
function ValidationExample() {
const [level, setLevel] = useState(0)

const minLevel = 1;
const errorMessage = 'Password is too weak';

return (



name="test"
rules={[{
validator: async () => {
return level >= minLevel ? Promise.resolve() : Promise.reject(errorMessage);
},
message: errorMessage
}]}
>



);
}


`

API

$3

| props | type | description |
| -- | -- | -- |
| settings | PasswordInputSettings | Strength indicator display settings |
| onLevelChange | (newLevel: 0 | 1 | 2 | 3 | 4) => void | Called when the input level changes |
| ...props | InputProps | Pass additional properties to the underlying Input component

$3

| props | type | description |
| -- | -- | -- |
| colorScheme | ColorScheme | Modify the indicator's color scheme |
| height | number | Change indicator bar height (in px) |
| alwaysVisible | boolean | If false, the bar only appears if the input field isn't empty |

> Default:

`jsx
{
colorScheme: [...],
height: 3,
alwaysVisible: false
}
`

$3

| props | type | description |
| -- | -- | -- |
| levels | string[] | Array of CSS color codes for the different strength levels:
levels[0] = weakest, levels[4] = strongest |
| noLevel| string | CSS color code for non-colored strength indicator bars. |

> Default:

`jsx
{
levels: ["#ff4033", "#fe940d", "#ffd908", "#cbe11d", "#6ecc3a"],
noLevel: "lightgrey"
}
``

License

MIT