React-signin-page NPM

react-signIn-page

npm-signin-page is a reusable React component designed to provide a simple and customizable sign-in page for your web applications. This package allows you to quickly integrate a professional-looking sign-in interface without the hassle of building one from scratch.

Features

Easy Integration: Seamlessly add the sign-in page component to your existing React projects.
Customization: Style the sign-in page according to your application's theme using custom CSS.
Lightweight: Minimal dependencies ensure that your application remains fast and efficient.
show password feature

Installation

Install the package using npm:

npm i react-signin-page
        OR
yarn add react-signin-page

Usage

import React from "react";
import Login from "react-signin-page";

function App() {
    const onValueChange = (e) =>{
        // write function for handleing the user input
        // e.target.email is email
        // e.target.passoword is password
    }

    const handleloginUser = (e) =>{
        //write function for handeling the sign in function
    }

    return (
        <div className="App">
            <Login onValueChange={onValueChange} handleSubmit={handleloginUser}/>
        </div>
    );
}

export default App;

props and their definition

Props	Required	Function	Default Value
bg	No	change background image
onValueChange	Yes	handle user input e.g. email and password	NULL
handleSubmit	Yes	handle user sign-in	NULL
height	No	set height of the Login page	100vh

Example

import React,{useState} from "react";
import Login from "react-signin-page";

const loginInitials = {
  email: "",
  password: "",
};

const LoginComponent = () =>{
    const [login, setLogin] = useState(loginInitials);

    const onValueChange = (e) => {
    setLogin({ ...login, [e.target.name]: e.target.value });

    const handleloginUser = async(e) =>{
        let response = await authenticateLogin(login);
        console.log(response);
        // This is just a demo function. make sure to write your own function according to your requirements.
    };

    return (
        <Login onValueChange={onValueChange} handleSubmit={handleloginUser}/>
    )
  };

};

export default LoginComponent;