react-mui-auth-page
react-mui-auth-page copied to clipboard
React Login/SignUp components Library backed by Material UI for fast Development
react-mui-auth-page
Getting Started :rocket:
npm i react-mui-auth-page
Demo
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 |
|---|---|
| Function | |
| Function | |
| Github | Function |
| Function | |
| 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