react-mui-auth-page

React Login/SignUp components Library backed by Material UI for fast Development

Usage no npm install needed!

<script type="module">
  import reactMuiAuthPage from 'https://cdn.skypack.dev/react-mui-auth-page';
</script>

README

react-mui-auth-page

npm npm NPM Snyk Vulnerabilities for npm package Libraries.io dependency status for latest release

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