antd-password-input-strength

Antd Input Component with password-strength indicator.

Features

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

Note: zxcvbn is a large library. Use code splitting to only load the library when necessary.

Install

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

or

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:

<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 inputProps={{}} />)}
    </Form.Item>
</Form>

Or with custom settings:

<Form>
    <Form.Item label="Password">
        <PasswordInput 
            onChange={this.onChange}
            settings={{
                height: 5
            }}
            inputProps={{
                size: 'large'
            }}
        />
    </Form.Item>
</Form>

API

PasswordInput

props	type	description
settings	PasswordInputSettings	Strength indicator display settings
onChange	function(e) {}	Input onChange event
inputProps	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