Home

Awesome

npm GitHub issues GitHub license Twitter Greenkeeper badge

antd-password-input-strength

Antd Input Component with password-strength indicator.

Preview GIF

Features

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-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 />)}
    </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

propstypedescription
settingsPasswordInputSettingsStrength indicator display settings
onLevelChange(newLevel: 01
...propsInputPropsPass additional properties to the underlying Input component

PasswordInputSettings

propstypedescription
colorSchemeColorSchemeModify the indicator's color scheme
heightnumberChange indicator bar height (in px)
alwaysVisiblebooleanIf false, the bar only appears if the input field isn't empty

Default:

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

ColorScheme

propstypedescription
levelsstring[]Array of CSS color codes for the different strength levels: <br> levels[0] = weakest, levels[4] = strongest
noLevelstringCSS color code for non-colored strength indicator bars.

Default:

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

License

MIT