antd-password-input-strength
Antd Input Component with password-strength indicator.
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
npm install --save antd-password-input-strengthor
yarn add --save antd-password-input-strengthNote: 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:
<Form>
<Form.Item label="Password">
<PasswordInput />
</Form.Item>
</Form>With Form.create():
<Form>
<Form.Item label="Password">
{this.props.form.getFieldDecorator("password", {
rules: [{
required: true,
message: "Please enter your password"
}]
})(<PasswordInput />)}
</Form.Item>
</Form>With custom settings:
<Form>
<Form.Item label="Password">
<PasswordInput
settings={{
...defaultSettings,
height: 5
}}
onChange={() => console.log("Changed")}
size="large"
/>
</Form.Item>
</Form>With validation:
function ValidationExample() {
const [level, setLevel] = useState(0)
const minLevel = 1;
const errorMessage = 'Password is too weak';
return (
<Form>
<Form.Item
name="test"
rules={[{
validator: async () => {
return level >= minLevel ? Promise.resolve() : Promise.reject(errorMessage);
},
message: errorMessage
}]}
>
<PasswordInput onLevelChange={setLevel} />
</Form.Item>
</Form>
);
}API
PasswordInput
| props | type | description |
|---|---|---|
| settings | PasswordInputSettings | Strength indicator display settings |
| onLevelChange | (newLevel: 0 | 1 |
| ...props | InputProps | Pass additional properties to the underlying Input component |
PasswordInputSettings
| 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:
{
colorScheme: [...],
height: 3,
alwaysVisible: false
}ColorScheme
| 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:
{
levels: ["#ff4033", "#fe940d", "#ffd908", "#cbe11d", "#6ecc3a"],
noLevel: "lightgrey"
}License
MIT