https://github.com/arpitbhalla/react-mui-auth-page

React Login/SignUp components Library backed by Material UI for fast Development
https://github.com/arpitbhalla/react-mui-auth-page

material-ui react react-component-library

Last synced: 23 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/arpitbhalla/react-mui-auth-page
• Owner: arpitBhalla
• License: mit
• Created: 2021-02-16T05:30:05.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-02-15T17:59:15.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T18:34:54.569Z (about 1 month ago)
• Topics: material-ui, react, react-component-library
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-mui-auth-page
• Size: 666 KB
• Stars: 23
• Watchers: 0
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-mui-auth-page

![npm](https://img.shields.io/npm/v/react-mui-auth-page?style=flat-square) ![npm](https://img.shields.io/npm/dm/react-mui-auth-page?style=flat-square) ![NPM](https://img.shields.io/npm/l/react-mui-auth-page?style=flat-square) ![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/react-mui-auth-page?style=flat-square) ![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/react-mui-auth-page?style=flat-square)

## Getting Started :rocket:

`npm i react-mui-auth-page`

## Demo

[Web Demo](https://react-mui-auth-page.surge.sh)

[CodeSandbox](https://codesandbox.io/s/react-mui-auth-page-demo-i5yxe?file=/src/App.js)

## Usage

```js

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

```

### Example

```js

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 (

    

  );

};

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)      |

### 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](https://github.com/arpitbhalla)