Test-react-pwr-library NPM

A simple React component that accepts a list of password requirements and updates them as they are fulfilled.

test-react-pwr-library

Usage

Install the package:

   npm i test-react-pwr-library

Import the Requirements component and use it in the app, it takes 3 props:
a. value: The password value
b. requirements: The list of requirements
c. onValidChange: The functions to call when the password value changes

Example implementation:

    import React, { useState } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { Requirements } from 'test-react-pwr-library';

    function App() {
    const [valid, setValid] = useState(false);
    const [password, setPassword] = useState('');
    const [username, setUsername] = useState('');

    const passwordRequirements = [
        {
        text: 'Must be at least 8 characters',
        validator: (val) => val.length >= 8,
        },
        {
        text: 'Must contain at least one number',
        validator: (val) => /\d/g.test(val),
        },
        {
        text: 'Must contain at least one lower-case letter',
        validator: (val) => /[a-z]/g.test(val),
        },
        {
        text: 'Must contain at least one upper-case letter',
        validator: (val) => /[A-Z]/g.test(val),
        },
    ];

    return (
        <div className='form'>
        <h1>Signup</h1>

        <Requirements
            value={password}
            requirements={passwordRequirements}
            onValidChange={(isValid) => setValid(isValid)}
        />

        <input
            placeholder='Username'
            value={username}
            onChange={(e) => setUsername(e.target.value)}
        />
        <input
            placeholder='Password'
            type='password'
            value={password}
            onChange={(e) => setPassword(e.target.value)}
        />

        <button disabled={!valid || !username}>Sign Up</button>
        </div>
    );
    }

    export default App;