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