React / Next Login and Sign Up Screen

This package will let use to access to tailwind css UI have a login and signup component with field validation

Prerequisites

This project requires ReactJs (version 18 or later), NodeJs (version 18 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
18.16.1
v8.16.0

Getting Started

These instructions will get you a copy of the package and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

To install and set up the library, run:

$ npm install @datumlabsio/react-login-ui

Or if you prefer using Yarn:

$ yarn add @datumlabsio/react-login-ui

Example:

import { LoginUI, SignupUI } from '@datumlabsio/react-login-ui'

// Please do install react-router-dom package if you are using react js
import { useNavigate  } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate()
  function handleLogin(data) {
    console.log(data)  //{ email: "[email protected]", password: "12345678"}
  }
  const navigateToSignUp = () => {
      navigate("/sign-up")
  }
  return (
    <>
      <LoginUI
        title="Title"
        handleLogin={handleLogin}
        navigateToSignUp={navigateToSignUp}
      />
    </>
  );
};


const SignUp = () => {
  const navigate = useNavigate();
  const navigateToSingIn = () => {
      navigate("/sign-in")
  }
  function handleSignup(data) {
    console.log(data)  //{ firstName: "Leo", lastName: "Messi", email: "[email protected]", password: "12345678"}
  }
  return (
    <>
      <SignupUI
        title="Foundation"
        handleSignup={handleSignup}
        navigateToSingIn={navigateToSingIn}
      />
    </>
  );
};

The Login component accepts the following props:

| Name | Type | Default value | Description | | --- | --- | --- | --- | | title | string | '' | Title used as project name | | handleLogin | func | | This is the function which will handle how to responsed when Sign-In button is clicked | | navigateToSingIn | func | | This function will help you navigate to sign up component |

The Sign Up component accepts the following props:

| Name | Type | Default value | Description | | --- | --- | --- | --- | | title | string | '' | Title used as project name | | handleSignup | func | | This is the function which will handle how to responsed when Sign-Up button is clicked | | navigateToSingIn | func | | This function will help you navigate to sign in component |