React-flexi-password-checklist NPM

react-flexi-password-checklist :white_check_mark:

A flexible React component that validates user passwords against the custom password requirement checklist, in real-time.

It is so flexible that the only thing required for you to pass to the component is the password value itself, which is obvious for a password validator.
It gives you the ability to customize the rest of the things, which includes the password requirements to check, custom password requirement statements, title, and so on, as per your need.

So let's dive right in and see what this component has to offer.

Installing the package

npm install react-flexi-password-checklist

Usage

import { FlexiPasswordChecklist } from 'react-flexi-password-checklist';

Please note that it is a named export.

:lock: Privacy

react-flexi-password-checklist is carefully designed by keeping the end users at the center and to protect their privacy. It solely focuses on the end-user experience and aims at enhancing the same in the future.
The username and password data are only used to carry out the validations and are not sent to any servers of any kind or shared with anyone; nor does it encourage or support misuse of user data.

First and foremost, you can choose what conditions/password requirements you want the password to be validated against. You can customize the requirement checks based on your preference, by passing a configuration object (config = { ...}) as a prop to the component.

You can pass the below password validation conditions to the config object :

Property name	Description	Type	Required	Allowed values	Default value
minLength	Minimum character length that the password value should comprise of	`integer`	No	-	8
lengthMatch	Validates if the password value is equal to or more than the set `minLength` or default value	`boolean`	No	true/false	true
includesUsername	Checks whether password contains username value or not	`boolean`	No	true/false	false
matchPasswords	Checks whether the password and confirm password values match or not	`boolean`	No	true/false	false
specialChar	Checks whether the password contains allowed special characters or not	`boolean`	No	true/false	true
upperCaseAndNumeric	Checks if the password has at least one uppercase or numerical value	`boolean/object`	No	true/false	true

Below conditions are enabled, by default, even if you don't pass the config object :
lengthMatch (minimum length set to 8)
specialChar
upperCaseAndNumeric (separate checks)

Certain password validation conditions require you to pass the below values as props along with the config object and password value :

username
The username prop should consist of the form's username value. It is a required value in case of includesUsername condition check.
confirmPassword
The confirmPassword prop should consist of the form's confirmPassword field value. It is a required value in case of matchPasswords condition check.

Please be aware not to use prop names other than username, password, confirmPassword and config.

Let's say you want to enable the matchPasswords condition, where we check if the passwords in the password and confirm password field match.
We can get that to work as below :

For class components

import React, { Component } from 'react';
import "./css/styles.css";
import { FlexiPasswordChecklist } from 'react-flexi-password-checklist';

class EnquiryForm extends Component {

    constructor(props) {
        super(props);
    
        this.state = { username : "",
                       password : "",
                       confirmPassword : "" };          
    }
    
    </*Rest of the code*/>
    
<FlexiPasswordChecklist password={this.state.password} 
                        confirmPassword={this.state.confirmPassword} 
                        config={{ matchPasswords : true }} 
/>     
               
}

For function components

import React, { Component } from 'react';
import "./css/styles.css";
import { FlexiPasswordChecklist } from 'react-flexi-password-checklist';

function EnquiryForm(props) {

const [ username, setUsername ] = useState("");
const [ password, setPassword ] = useState("");
const [ confirmPassword, setConfirmPassword ] = useState("");
    
    </*Rest of the code*/>
    
<FlexiPasswordChecklist password={password} 
                        confirmPassword={confirmPassword} 
                        config={{ matchPasswords : true }} 
/>     
               
}

As you can see above, we have passed confirmPassword as a prop along with password, after setting matchPasswords to true.
This is done as matchPasswords condition check relies on confirmPassword value for its validation.

Similar is the case with includesUsername condition.
We need to make sure that we pass username as a prop when includesUsername is set to true.

:ballot_box_with_check: Password Condition Checks

You can use the below condition checks as a part of your custom password checklist :

minLength

The minLength property takes an integer value which represents the minimum number of characters you want the user to enter for the check to get resolved.

Usage

{ minLength : 12 }

Type

integer

By default, the minLength property value is set to 8.

<FlexiPasswordChecklist password={this.state.password} 
                        config={ {minLength : 15} }
/>

In the above example, the lengthMatch condition would be enabled by default, with the minimum password character length set to 15.

lengthMatch

The lengthMatch password requirement checks if the password entered by the user matches the default or the desired character length set by you.

Usage

{ lengthMatch : true/false }

Type

boolean

By default, it is set to true.

You can skip adding it to the config object as it is enabled by default.
If you prefer using a custom minimum character length instead of the default value, for the lengthMatch check, you can simply add minLength property to the config object with its value set to the desired length.

includesUsername

The includesUsername password condition checks whether the entered password contains username or not. The condition check would not resolve to :white_check_mark: if the username, as a whole, is included in the entered password.

Usage

{ includesUsername : true/false }

Type

boolean

By default, it is set to false.

<FlexiPasswordChecklist username={this.state.username} 
                        password={this.state.password} 
                        config={ {includesUsername : true} }
/>

If you plan to use this requirement/condition check, please make sure to pass username prop for the check to work as expected.

matchPasswords

The matchPasswords condition checks whether the passwords entered by the user in the password and confirm password field match or not.

Usage

{ matchPasswords : true/false }

Type

boolean

By default, it is set to false.

<FlexiPasswordChecklist password={this.state.password} 
                        confirmPassword={this.state.confirmPassword} 
                        config={ {matchPasswords : true} }
/>

In order to use this condition check, please make sure to pass confirmPassword prop for the validation to work as expected.

specialChar

The specialChar requirement checks whether the user entered password contains special characters or not.

Usage

{ specialChar : true/false }

Type

boolean

By default, it is set to true.

The condition would check for the following special characters in the password value - !@#*_|.?

You could see that the specialChar condition's default text has a keyword - allowed, with blue font color.

A simple mouse hover or a tap action on the allowed keyword would reveal the allowed special characters that the condition would check for, in the password value.

upperCaseAndNumeric

The upperCaseAndNumeric requirement checks if the entered password includes at least one number or an uppercase letter, or both.

Usage

{ upperCaseAndNumeric : true/false }

Type

boolean

By default, it is set to true.

When you set upperCaseAndNumeric value to either true or false, both the condition checks i.e. upperCase as well as numeric would be enabled/disabled.
To have more control, you can assign upperCaseAndNumeric property to an object rather than a plain boolean value.
The object would allow further splitting of the conditions into either just upperCase condition check or a numeric one.

Usage

{ upperCaseAndNumeric : { upperCase : true/false, numeric : true/false } }

Type

object

Let's say you don't want the upperCase condition as a part of your password requirement.

<FlexiPasswordChecklist username={this.state.username} 
                        password={this.state.password} 
                        confirmPassword={this.state.confirmPassword} 
                        config={ {
                            matchPasswords : true,
                            includesUsername : true,
                            upperCaseAndNumeric : { numeric : true }
                        } }
/>

As demonstrated above, we have set upperCaseAndNumeric value to { numeric : true }, therefore, eliminating the upperCase check from the group.

Setting upperCaseAndNumeric value to an empty object will remove both the checks. It is recommended to rather set the value to false if you don't plan to add upperCase and numeric checks.

Thus, the object assignment would allow you to be more specific with the condition enable/disable part rather than treating both the checks as a single unit.

:u6307: Custom Condition Texts

You can frame the password requirement texts in your own verbiage instead of the default ones.
Enable it by passing the conditionTexts property to the config object.

Usage

{ conditionTexts :  {
                       lengthMatchText : "<custom condition text>",
                       includesUsernameText : "<custom condition text>",
                       matchPasswordsText : "<custom condition text>",
                       specialCharText : "<custom condition text>",
                       upperCaseAndNumericText : { upperCaseText : "<custom condition text>" , 
                                                   numericText : "<custom condition text>"
                                                 }
                    } 
}

Type

object

It is not enabled by default.
It is not mandatory to include each and every condition text in the conditionTexts object.

For example, let's say you don't wish to customize condition texts for matchPasswords and specialChar.
In this case, you can simply eliminate it from the conditionTexts object, like below :

<FlexiPasswordChecklist username={this.state.username} 
                        password={this.state.password} 
                        confirmPassword={this.state.confirmPassword} 
                         config={ {
                            minLength : 10,
                            conditionTexts : {
                                lengthMatchText : "Minimum length should be 10",
                                includesUsernameText : "Avoid using username in your password",
                                upperCaseAndNumericText : { upperCaseText : "Please use at least one uppercase character", 
                                                            numericText : "Please include at least one number" 
                                                          }
                            },
                            matchPasswords : true,
                            includesUsername : true
                         } }
/>

This would set the default condition texts for matchPasswords and specialChar, while texts for the rest of the conditions would be the ones that are included in the conditionTexts object. If you wish to frame all of them as per your text content, you can include them all in the conditionTexts object.

<FlexiPasswordChecklist  username={this.state.username} 
                         password={this.state.password} 
                         confirmPassword={this.state.confirmPassword} 
                         config={ {
                            minLength : 10,
                            conditionTexts :  {
                                lengthMatchText : "Minimum length should be 10",
                                includesUsernameText : "Avoid using username in your password",
                                matchPasswordsText : "Both password fields must match",
                                specialCharText : "Please use at least one of the following special characters - !@#*_|.?",
                                upperCaseAndNumericText : { upperCaseText : "Please use at least one uppercase character", 
                                                            numericText : "Please include at least one number"
                                                          }
                             },
                            matchPasswords : true,
                            includesUsername : true
                         } }
/>

Please note that if you have the lengthMatch condition enabled and plan to set a custom condition text for the same, kindly make sure to mention the minimum character length value in the lengthMatchText text content.
It should be in sync with the minLength property value passed by you in the config object.
For example, if the passed minLength property value is 10, please mention that the minimum character length value is 10 in the lengthMatchText text content.
 config={ { minLength : 10,
            conditionTexts : { lengthMatchText : "Please make sure your password has at least 10 characters." } 
        } }
In case you have not added minLength to the config object, please mention the minimum character length value as 8 in the lengthMatchText text content.
 config={ { conditionTexts : { lengthMatchText : "Please make sure your password has at least 8 characters." } } }
Doing so would help to avoid confusion for the end user.
The minimum character length value in the lengthMatch condition's default text stays in sync with the passed minLength property value.

So that's how you can have your own custom condition texts.

:a: Checklist Title

You can set your own checklist title, keep the default one, or have no title at all.

Usage

{ title : true/false }

Type

boolean

By default, it is set to false.

Let's understand it better through examples.

All we need to do is set the title property to true, in our good old config object.
Doing so will set the title text in the checklist window to the default value - Password checklist.

<FlexiPasswordChecklist username={this.state.username} 
                        password={this.state.password} 
                        confirmPassword={this.state.confirmPassword} 
                        config={ { title : true,
                                   matchPasswords : true,
                                   includesUsername : true
                        } }
/>

To set a custom title, you need to assign an object to the title property.

Usage

{ title : { text : "<custom checklist title>" } }

Type

object

Let's have a closer look at it.

<FlexiPasswordChecklist username={this.state.username} 
                        password={this.state.password} 
                        confirmPassword={this.state.confirmPassword} 
                        config={ { title : { text : "Password Validator" /* custom text for the title property */ },
                                   matchPasswords : true,
                                   includesUsername : true
                        } } 
/>

The title object must have a property named - text.
The text property only accepts a string value, which holds your custom checklist title.

If you pass a value other than a string or even an empty string, to the text property, the default title text would be displayed.

{ text : "Password Validator" }

Please note that it expects the object with text as the property name. If you use a different property name, the title text displayed would be the default one - Password checklist.

The below code will not set the title text to My Password Validator.

<FlexiPasswordChecklist password={this.state.password} 
                        config={ { title : { customText : "My Password Validator" } } } 
/>

:page_with_curl: Description Text

Description Text allows you to add extra textual content. It could be a place for you to explain the password requirement instructions in more detail or maybe a brief information about how you are securely handling user passwords.

Usage

{ description : true/false }

Type

boolean

By default, it is set to false.

To set a custom description text, you need to assign an object to the description property.

Usage

{ description : { text : "<custom description text>" } }

Type

object

<FlexiPasswordChecklist username={this.state.username} 
                        password={this.state.password} 
                        confirmPassword={this.state.confirmPassword} 
                        config={ {
                            matchPasswords : true,
                            includesUsername : true,
                            title : true,
                            description : { text : "Please make sure that your password meets all the requirements listed below..." }
                        } }
/>

Please note that it expects the object with text as the property name. If you use a different property name, the description text displayed would be the default one - To keep your valuable information safe, we require that you use a strong password that meets the minimum requirements listed below.

:art: Custom Styles

Custom Styles enable all-new personalization features for description text, checklist title and password conditions, making the customization experience even more seamless.
It provides you the flexibility to individually target textual content and customize its font face, size, and color, making it easy for the components to adapt to the custom styles of your choice, as font faces/styles are generally subjective.

Usage

{
  styles = {
         title : { fontFace : "<custom font name>", fontSize : <custom font size>, fontColor : "<custom font color>" },
         description : { fontFace : "<custom font name>", fontSize : <custom font size>, fontColor : "<custom font color>" }, 
         conditions : { fontFace : "<custom font name>", fontSize : <custom font size>, fontColor : "<custom font color>" }
  }
}

Type

object

It is not enabled by default.

You can see that the styles property follows a simple nested object design.

It consists of three properties - title, description and conditions.
As the property names indicate, title will hold styling data for the checklist title, description would consist of styles for description text and finally, conditions will enable customization capabilities for the condition texts.

All the three properties - title, description and conditions accept styling properties in the form of an object.

To enable Custom Styles, you just need to add the styles property to the config object. The styles property itself is an object that holds all the style elements and style components.

What are style elements and style components?

In this case, style elements are the various styling properties that you would use here, such as fontFace, fontSize and fontColor.
Whereas style components are the components we discussed above, upon which the style element properties will be applied - title, description and conditions.

We will be hearing the terms - style elements and style components a lot, later down the lane.

It is not mandatory to include each and every style element (fontFace, fontSize, fontColor) or style component (title, description, conditions) in the styles object.

Before we get to all the amazing examples, let's go through some important aspects about Custom Styles.

If you don't pass the styles property to the config object, the default styling properties will be applied for the style components.
The order of the style elements or style components doesn't matter.
If you have passed the styles property to the config object with custom fontFace and fontSize, let's say, for just the title and description component, the respective changes would be applied for title and description only, while styling for the rest of the style components would be the default one.

Let's explore the style elements in more detail.
As mentioned above, you can customize below style elements :

Font Face
Font Size
Font Color

:abc: Custom Font

You have the freedom to choose your own font, instead of the default one, for the checklist title, description text and password condition texts.
We are talking about two types of fonts here -

Pre-installed/system fonts
Fonts imported in the .css file using the @font-face rule

Usage

{ styles = { <title/description/conditions> : { fontFace : "<custom font name>" } } }

Type

object

Please be aware that the fontColor style element expects a string value.

Let's see it in action.

We need to set fontFace property to the desired font name, enclosed in single/double quotations, and add it in the style component object of your choice.

{ conditions : { fontFace : "Courier New" } }

Add the style component object in the styles object, which ultimately resides in the config object.

{ config : { styles : { conditions : { fontFace : "Courier New" } } } }

Desired custom font

Default font

As mentioned above, we could handle two ways of font assignments here.
Let's explore them in more detail.

Pre-installed/system fonts

These fonts are the ones that are pre-installed in your system. In short, the ones that are available by default - Segoe UI, Calibri (on Windows) and Helvetica, Optima (on macOS) - to name a few.
Such font names can be passed to the fontFace property without any additional steps.

In the below example, we have passed Helvetica Neue Light, a pre-installed font on macOS, as a value to the fontFace property, for title and conditions style component.

<FlexiPasswordChecklist password={this.state.password} 
                        config={ {
                            title : true,
                            description : true,
                            includesUsername : true,
                            styles : { title : {fontFace : "Helvetica Neue Light"},
                                       conditions : {fontFace : "Helvetica Neue Light"} }
                        } }
/>

Upon closer look, you could see that the description text font remains unchanged. The description text font, in this case, displays the default font, as it was excluded from the styles object.

Please note that a font that is pre-installed for you might not be present for other systems or users that might use your application or form. This might lead to an inconsistent typography experience on different systems.

We will handle this scenario by importing font files the conventional way.

Fonts imported in the .css file using the @font-face rule

Now, these fonts are the ones that may not be pre-installed in the system and consist of undertaking additional steps to get them to work. All you need to do is import them manually in the css stylesheet using the @font-face rule, like we do for importing any desired font files in general, to make sure the typography experience is consistent across all the devices.

Let's proceed with it step-by-step.

Step 1. Import font files using the `@font-face` rule in the stylesheet

/* Fontfaces */

@font-face { 
    font-family : 'Graphik Black'; 
    src : url('../../public/fontFaces/Graphik-Black.woff') format('woff');
    font-weight : normal;
    font-style : normal;
} 

@font-face { 
    font-family : 'Great Vibes Regular'; 
    src : url('../../public/fontFaces/Great-Vibes-Regular.woff') format('woff');
    font-weight : normal;
    font-style : normal;
};  

</*Rest of the CSS declarations*/>

Step 2. Import the stylesheet in your application where you import and render/call the react-flexi-password-checklist package

import  React, { Component } from 'react';
import "./css/styles.css";  /*includes @font-face rules*/
import { FlexiPasswordChecklist } from 'react-flexi-password-checklist';

Step 3. Set the `fontFace` property to the `font-family` value set in the stylesheet

<FlexiPasswordChecklist password={this.state.password} 
                        config={ {
                            title : true,
                            includesUsername : true,
                            styles : { conditions : {fontFace : "Great Vibes Regular"} }
                        } }
/>

Here, we have added Great-Vibes-Regular.woff font file in styles.css with font-family value assigned to Great Vibes Regular, imported the stylesheet in our application, and have set the fontFace property to 'Great Vibes Regular' for the conditions style component.

So that is how you can use custom fonts to add a personal touch to the text content.

:heavy_plus_sign: Custom Font Size

You can assign your own font size for the title, description as well as the password condition texts.

Usage

{ styles = { <title/description/conditions> : { fontSize : <custom font size> } } }

Type

object

Please be aware that the fontSize style element expects an integer value.

Let's understand it better with an example.

<FlexiPasswordChecklist password={this.state.password} 
                        config={ {
                            title : true,
                            description : true,
                            styles : { description : {fontSize : 12},
                                       title : {fontSize : 50, fontFace : "Graphik Black"} }
                        } }
/>

As simple as that!
As you can see in the above code, we have set different font sizes for description and the title style component.

Also, as we have excluded conditions style component from the styles object, they get the default treatment.
This is how you can set your own font sizes to the style components of your choice.

:rainbow: Custom Font Color

We all know the vital role good color combinations play in enhancing the overall application experience.
So set your color theories free and showcase the font colors of your choice.

Usage

{ styles = { <title/description/conditions> : { fontColor : "<custom font color>" } } }

Type

object

Please be aware that the fontColor style element expects a string value.

Let's understand it better with an example.

<FlexiPasswordChecklist username={this.state.username}
                        password={this.state.password} 
                        config={ {
                            title : true,
                            includesUsername : true,
                            description : true,
                            styles : { description : {fontColor : "#922B21"},
                                       title : {fontFace : "Graphik Black", fontColor : "#33BBFF"} }
                        } }
/>

Please be aware that the set font color for condition texts would be revealed only when the condition resolves to :white_check_mark:.

By default, the font color changes to black when a given condition resolves to :white_check_mark:.

Similarly, when you set a custom font color for condition texts, the font color would change to the custom color only when any condition is satisfied.

Let's understand it through some examples.

<FlexiPasswordChecklist password={this.state.password} 
                        config={ {
                            title : true,
                            description : true,
                            styles : { description : {fontSize : 14, fontColor : "#2E80D4", fontFace : "Helvetica Neue Light"},
                                       title : {fontColor : "#F01A4F"},
                                       conditions : {fontColor : "#D4AC0D", fontFace : "Helvetica Neue Light"} }
                        } }
/>

We could see above that despite of us setting the font color for conditions to #D4AC0D, we still see them display gray.

When any of the custom/default conditions are satisfied, the font color changes to the color set by you in the conditions style component, belonging to the styles object.

So this is how you can use custom font colors and make the checklist window seamlessly blend into your application/website.

:warning: Introducing Prop Check

Prop Check, as the name suggests, would check if you have accidentally missed passing the required props or maybe misspelled it, based on the condition checks you have enabled.
So basically, it would act as a debugger and prompt you with the missed/misspelled prop, in the checklist window.

Usage

{ propCheck : true/false }

Type

boolean

By default, it is set to false.
Please make sure to disable Prop Check in the production build of your application/website, as it is solely designed to help the developer with the troubleshooting process, and not intended for the end user.

Let's see how it works with an example.

We have set matchPasswords property to true in the config object.

<FlexiPasswordChecklist  password={this.state.password} 
                         config={ { title : true,
                                    matchPasswords : true, 
                                    propCheck : true } }
/>

As you know by now that by setting matchPasswords to true, we enable the main password and confirm password validation.
So, as you can see in the above code, we have missed to pass confirmPassword as a prop. As a result, we receive below prompt :

Same is the case with includesUsername check where you would be prompted with missing username prop, if you miss to pass it or misspell it accidentally.

Since the validation is dependent on those input values, we need to make sure that confirmPassword and username are passed as props if we plan to use matchPasswords and includesUsername condition checks.

So, to summarize, Prop Check helps you easily identify if you have missed passing the required props. Thus, saving you a considerable amount of time, needed otherwise, to manually scan the code, which could be tedious sometimes.

:white_square_button::sparkles: Introducing Dark Mode

There could be instances when you choose to have a dark background for your form or website.
Well, that’s what Dark Mode is for.
By setting a simple config property darkMode to true, you enable your checklist window to transform into Dark Mode.

The background color of the checklist window blends into the dark background color of your choice, set by you in the form or website.
The font color for the condition texts, when not validated, will be gray, like they are in default mode. It would switch to white once any enabled condition is satisfied.

When you pass a custom font color for the conditions style component, in the styles object, the font color for the condition texts would change to the custom font color only when any enabled condition is satisfied.

Usage

{ darkMode : true/false }

Type

boolean

By default, it is set to false.
Please note that the background color in Dark Mode would be the one you have set for your form or website.

Let's see Dark Mode in action.

You need to set darkMode property to true, in the config object, for Dark Mode to work.

Suppose we have a .form-container class that wraps the form input tags, button and react-flexi-password-checklist module.
In the below example, the background-color for our supposed .form-container class is set to #353535.

In the below example, the background-color for .form-container class is set to black.

There is one more thing to it... :fireworks:

You can add a subtle glow to the condition texts, title, description text, and the validation indicator.
All you need to do is pass an object.

Usage

{ darkMode : { withGlow : true/false } }

Type

object

To enable text glow, assign an object with the property name as withGlow and set it to true.

The text glow color is dynamic and adapts to the set custom color for any of the style components in the styles property.

<FlexiPasswordChecklist  password={this.state.password} 
                         config={ { title : true,
                                    description : true, 
                                    darkMode : { withGlow : true }, 
                                    styles : { 
                                                title : { fontFace : "SF Pro Display", fontColor : "#AA356A" },
                                                description : { fontFace : "Helvetica Neue Light", fontSize : 14, fontColor : "#5E1232" },
                                                conditions : { fontFace : "Helvetica Neue Light" } 
                                    } } }
/>

As you can see above, we have set #AA356A color for the title and #5E1232 for the description style component.
So along with the actual font color, the text glow color would also change from the default color to #AA356A for title and to #5E1232 for the description style component.

As we have not passed any custom font color to the conditions style component, the text glow color for conditions is set to the default one.

Dark Mode shines when combined with Custom Styles.

And the text glow takes it to a whole new level.

So that is how you can use Dark Mode and its stunning text glow feature.

You have finally reached the end of the document. :confetti_ball::tada:
Appreciate the patience. :pray:

For one last time, let's see react-flexi-password-checklist in all its glory...

<FlexiPasswordChecklist username={this.state.username} 
                        password={this.state.password} 
                        config={ {
                            minLength : 10,
                            includesUsername : true,
                            matchPasswords : true,
                            upperCaseAndNumeric : { upperCase : true },
                            description : true,
                            propCheck : true,
                            darkMode : { withGlow : true },
                            title : { text : "Password requirement checklist" },
                            styles : { 
                                title : { fontFace : "SF Pro Display", fontColor : "#27AE60" },
                                description : { fontFace : "Helvetica Neue Light", fontSize : 14, fontColor : "#85C1E9" },
                                conditions : { fontColor : "#F7DC6F" } 
                            },
                            conditionTexts :  {
                                lengthMatchText : "Please make sure password has minimum 10 characters",
                                includesUsernameText : "Make sure your password does not contain your username",
                                matchPasswordsText : "Password and Confirm Password must match",
                                specialCharText : "Please include at least one of the following special characters - !@#*_|.?",
                                upperCaseAndNumericText : { 
                                                            upperCaseText : "Please make sure to add at least one uppercase letter" , 
                                                            numericText : "Please make sure to include at least one numeric value in your password"
                                                          }
                             } 
                        } }
/>

Screenshots

Combined layouts

Screen dimensions : 1900px x 1145px

Side-by-side layout

Screen dimensions : 1900px x 1145px

Vertical layout

Screen dimensions : 1900px x 1145px

password checklist validator validate verify react form check signup login register

@infinitebrahmanuniverse/nolb-react-fl @everything-registry/sub-chunk-2555 @zalastax/nolb-react-fl

1.1.0

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

react-flexi-password-checklist :white_check_mark:

Installing the package

Usage

:lock: Privacy

Table of Contents

For class components

For function components

:ballot_box_with_check: Password Condition Checks

minLength

Usage

Type

lengthMatch

Usage

Type

includesUsername

Usage

Type

matchPasswords

Usage

Type

specialChar

Usage

Type

upperCaseAndNumeric

Usage

Type

Usage

Type

:u6307: Custom Condition Texts

Usage

Type

:a: Checklist Title

Usage

Type

Usage

Type

:page_with_curl: Description Text

Usage

Type

Usage

Type

:art: Custom Styles

Usage

Type

What are style elements and style components?

:abc: Custom Font

Usage

Type

Desired custom font

Default font

Pre-installed/system fonts

Fonts imported in the .css file using the @font-face rule

Step 1. Import font files using the @font-face rule in the stylesheet

Step 2. Import the stylesheet in your application where you import and render/call the react-flexi-password-checklist package

Step 3. Set the fontFace property to the font-family value set in the stylesheet

:heavy_plus_sign: Custom Font Size

Usage

Type

:rainbow: Custom Font Color

Usage

Type

:warning: Introducing Prop Check

Usage

Type

:white_square_button::sparkles: Introducing Dark Mode

Usage

Type

There is one more thing to it... :fireworks:

Usage

Type

Screenshots

Combined layouts

Side-by-side layout

Vertical layout

Fonts imported in the .css file using the `@font-face` rule

Step 1. Import font files using the `@font-face` rule in the stylesheet

Step 3. Set the `fontFace` property to the `font-family` value set in the stylesheet