Bnp-react-auth NPM

React Login Component

A flexible and customizable login component for React applications, built with Material-UI. This component provides an easy way to create a login form with validation support.

Installation

You can install this component using npm:

npm install bnp-react-auth

Usage

To use the Login component in your React application, follow these steps:

Import the Login component:

import Login from 'bnp-react-auth';

Render the Login component in your JSX code:

<Login
  headerLabel="Sign In"
  loginButtonLabel="Login"
  emailFieldLabel="Email Address"
  passwordFieldLabel="Password"
  emailFieldHelperText="Enter your email address"
  passwordFieldHelperText="Enter your password"
  inputFieldSize="normal"
  loginButtonSize="normal"
  loginButtonColor="primary"
  onLogin={handleLogin}
  validators={
    {
        email: (email: string) => !!email,
        password: (password: string) => !!password,
    }
    }
/>

Implement the handleLogin function to handle the login process. It will be called when the login button is clicked.

const handleLogin = ({ email, password }) => {
  // Implement your login logic here
};

Props

headerLabel (optional): Set the header label for the login form.
loginButtonLabel (optional): Set the label for the login button.
emailFieldLabel (optional): Set the label for the email input field.
passwordFieldLabel (optional): Set the label for the password input field.
emailFieldHelperText (optional): Set helper text for the email input field.
passwordFieldHelperText (optional): Set helper text for the password input field.
inputFieldSize (optional): Set the size of the input fields (small, normal, or large).
loginButtonSize (optional): Set the size of the login button (small, normal, or large).
loginButtonColor (optional): Set the color of the login button.
onLogin (optional): Callback function to handle the login process.
validators (optional): An object containing validation functions for email and password. You can also specify custom error text for validation failures.
onChange (optional): Callback function for input field changes.
customLoginButton (optional): Provide a custom JSX element for the login button.