A React component that displays the password strength parameters

$npm install react-passwordStregth-indicator

$ yarn add react-passwordStregth-indicator

import { PasswordStregthIndicator } from react-passwordStregth-indicator

const [password, setPassword] = useState(""); const [isPasswordFieldoutOfFocus, setIsPasswordFieldoutOfFocus] = useState(false); const [ isPasswordStrengthIndicatorVisible, setIsPasswordStrengthIndicatorVisible, ] = useState(false);

return ( <>

Properties : password : it is the input password value.required isPasswordFieldoutOfFocus: this prop is used to apply styles based on the input value.required mostUsedPasswordList : the list containing the list of commonly used passwords in general. optional className: className can be passed if you want to alter the styles.optional commonPasswordWarningMessage: custom warning message for most commonly used passwords.optional default : "This password is in a list of commonly used passwords on other websites"