@datumlabsio/react-login-ui

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: "[e-mail]", 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: "[e-mail]", 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