Package Exports

antd-password-input-strength

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (antd-password-input-strength) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

antd-password-input-strength

Antd Input Component with password-strength indicator.

Preview GIF

Features

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

Install

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

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

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