react-easy-login

2.1.6 • Public • Published

react-easy-login

react-easy-login is a simple and easy-to-use React component for implementing a login page with minimal code. It provides a pre-styled login form that you can use in your React applications by simply passing a few props.

Features

  • Simple to integrate: Drop the login form into your React project without the need to write a full login page.
  • Customizable: Easily configure input fields and authentication endpoint.
  • Routing support: Automatically redirect users after successful login.
  • Built-in form validation: Basic form validation out of the box.
  • Error handling: Displays error messages for failed login attempts.

Installation

You can install react-easy-login using npm or yarn.

Using npm:

npm install react-easy-login

Using the module

import React from 'react';
import Login from 'react-easy-login';

function App() {
  return (
    <div className="App">
      <Login
        inputs={['email', 'password']}
        authFields={['email', 'password']}
        uri="https://your-auth-api.com/login"
        redirectto="/dashboard"
        registerroute="/register"
      />
    </div>
  );
}

export default App;

Props

The Login component accepts the following props:

Prop Type Description
inputs Array An array of strings that specify the input fields (e.g., ['email', 'password']).
authFields Array Fields to be sent in the authentication request (should match your backend API fields).
uri String The API endpoint to which login credentials are submitted.
redirectto String Path to redirect to after a successful login (e.g., /dashboard).
registerroute String Path to the registration page (e.g., /register). Users will be redirected here if they don't have an account.

Customization

You can customize the styles by overriding the default CSS classes defined in Login.css. You can also change the structure of your authentication form using props.

.auth-container {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 10px;
}

.submit-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #218838;
}

Readme

Keywords

none

Package Sidebar

Install

npm i react-easy-login

Weekly Downloads

7

Version

2.1.6

License

ISC

Unpacked Size

65.6 kB

Total Files

11

Last publish

Collaborators

  • rohithchowki