react-mui-auth-page

Getting Started :rocket:

npm i react-mui-auth-page

Demo

Web Demo

CodeSandbox

Usage

import { DialogAuth } from "react-mui-auth-page";

Example

import React from "react";
import { DialogAuth } from "react-mui-auth-page";

const MyDialogAuthComponent = () => {
  const handleSignIn = ({ email, password }) => {
    console.log({ email, password });
  };
  const handleSignUp = async ({ email, name, password }) => {
    await doSomethingAsyn();
  };
  const handleForget = ({ email }) => {
    console.log({ email });
  };

  const handleSocial = {
    Google: () => {},
    Github: () => {},
  };

  return (
    <DialogAuth
      open={true}
      textFieldVariant="outlined"
      onClose={handleClose}
      handleSignUp={handleSignUp}
      handleForget={handleForget}
      handleSignIn={handleSignIn}
      handleSocial={handleSocial}
    />
  );
};

export default MyDialogAuthComponent;

Props

| Prop Name | Type | Required | Default Value | | ----------------- | ------------------------------------ | -------- | ------------- | | hideTabs | Boolean | Yes | False | | textFieldVariant | "outlined" or "filled" or "standard" | No | filled | | open | Boolean | Yes | | | onClose | Function | Yes | | | logoName | string | | | | logoComponent | React Children | | | | handleSignUp | Function | Yes | | handleForget | Function | Yes | | handleSignIn | Function | Yes | | emailValidator | Function | | passwordValidator | Function | | handleSocial | Social Object |

Social Object

| Prop Name | Type | | --------- | -------- | | Google | Function | | Linkedin | Function | | Github | Function | | Facebook | Function | | Twitter | Function |

Local Run

npm install

npm run dev

ScreenShots

With Tabs

WithOut Tabs

Get Involved!

• Pull requests are welcome!
• Submit github issues for any feature enhancements, bugs or documentation problems

Maintainer

arpitBhalla