Negligent Parachute Maintainers
    Wondering what’s next for npm?Check out our public roadmap! »

    react-password-checklist
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    React Password Checklist

    npm version Minzipped Size NPM Downloads NPM License
    Build Status Coverage Status Issues Pull Requests Twitter

    A React Component to display the success or failure of password strength rules that updates as a user types.

    Example

    React Password Checklist Demo

    Install in your project

    npm install --save react-password-checklist

    yarn add react-password-checklist

    Note: react is a peer dependency. You should be using this in a React project.

    Example Usage

    import React, {useState} from "react"
    import PasswordChecklist from "react-password-checklist"
    
    const SignUp = () => {
    	const [password, setPassword] = useState("")
    	const [passwordAgain, setPasswordAgain] = useState("")
    	return (
    		<form>
    			<label>Password:</label>
    			<input type="password" onChange={e => setPassword(e.target.value)}>
    			<label>Password Again:</label>
    			<input type="password" onChange={e => setPasswordAgain(e.target.value)}>
    
    			<PasswordChecklist
    				rules={["length","specialChar","number","capital","match"]}
    				minLength={5}
    				value={password}
    				valueAgain={passwordAgain}
    				onChange={(isValid) => {}}
    			/>
    		</form>
    	)
    }
    

    Custom Messages/Translations

    import React, {useState} from "react"
    import PasswordChecklist from "react-password-checklist"
    
    const SignUp = () => {
    	const [password, setPassword] = useState("")
    	const [passwordAgain, setPasswordAgain] = useState("")
    	return (
    		<form>
    			<label>Password:</label>
    			<input type="password" onChange={e => setPassword(e.target.value)}>
    			<label>Password Again:</label>
    			<input type="password" onChange={e => setPasswordAgain(e.target.value)}>
    
    			<PasswordChecklist
    				rules={["length","specialChar","number","capital","match"]}
    				minLength={8}
    				value={password}
    				valueAgain={passwordAgain}
    				messages={{
    					length: "La contraseña tiene más de 8 caracteres.",
    					specialChar: "La contraseña tiene caracteres especiales.",
    					number: "La contraseña tiene un número.",
    					capital: "La contraseña tiene una letra mayúscula.",
    					match: "Las contraseñas coinciden.",
    				}}
    			/>
    		</form>
    	)
    }
    

    Available Rules

    Customize the component to display only the rules you need in the desired order you wish to display them.

    length

    Valid if the password meets the minimum length. Requires minLength prop to be included.

    specialChar

    Valid if the password contains a special character from this list.

    number

    Valid if the password contains a number.

    capital

    Valid if the password contains a capital letter.

    match

    Valid if the password matches the confirm password valud. Requires valueAgain prop to be included.

    Props

    Prop Description Type Required Default
    rules Rules to display in the order desired.
    Options are length, specialChar,
    number, capital, match
    array yes
    value Current potential password string yes
    minLength Minimum Password Length number Only with
    length rule
    valueAgain Current potential password confirmation string Only with
    match rule
    onChange Callback that is triggered when the
    password becomes valid or invalid across
    all rules.
    function (isValid) => {}
    messages Object with keys as rules, and values as strings to use as the message to be displayed object
    className Class applied to the entire component string
    style Inline styles applied to the
    outer component wrapper
    object
    iconSize Size of or 𐄂 icon number 18
    validColor Color of checkmark icon string #4BCA81
    invalidColor Color of X icon string #FF0033

    Available Classes

    • .valid - Valid Message
    • .invalid - Invalid Message

    Run Locally

    npm run storybook

    yarn storybook

    Install

    npm i react-password-checklist

    DownloadsWeekly Downloads

    123

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar