react密码强度进度条

效果图：

image.png

需要引入zxcvbn，使用yarn add zxcvbn或npm i zxcvbn -S

import React from 'react';
import { keys, values } from 'lodash'
import {Col, Row } from 'antd'
import styles from './index.less'
import zxcvbn from 'zxcvbn';
const PasswordStrengthBar = ({ password }) => {
    let { score } = zxcvbn(password) ;
    score = score +1;
  const strengthMeterOptions = {
    '非常弱': '#e74242',
    '弱': '#EFBD47',
    '一般': '#ffa500',
    '强': '#1bbf1b',
    '非常强': '#008000',
  }
  const progressSegments = values(strengthMeterOptions).map((item, index) => {
    const segmentProgress = index * 20;
    const height = 14;
    const segmentStyle = {
      width: '20%',
      height:height+'px',
      marginTop:- height + 'px',
      backgroundColor:(password&& index<score)?item:'#ccc',
      marginLeft: `${segmentProgress}%`,
    };
    return <div key={index} className={styles["progress-segment"]} style={segmentStyle}></div>;
  });

  return (
    <div className={styles["password-strength-bar"]}>
      <div className={styles["progress"]}>{progressSegments}</div>
      <Row justify="space-around" className={styles['process-steps']}>
          {
            keys(strengthMeterOptions).map(value => <Col span={5} key={value}>{value}</Col>)
          }
      </Row>
    </div>
  );
};

export default PasswordStrengthBar;

css代码'./index.less'：

.password-strength-bar{
    position: relative;
    width:100%;
    margin-top: 12px;
    .progress{
        .progress-segment{
            flex-shrink: 0;
            margin-inline-end:2px;
            transition:all 0.3s;
            border-right: 2px solid #333;
        }
        .progress-segment:last-child{
            border :none;
        }
    }
   .process-steps{
    width: 100%;
    text-align: center;
    color: #fff;
    :global .ant-col-5{
        width: 20%;
    }
   }
  }