# material-ui-modal

> Modal based on material ui of react

Latest version **1.0.0** (published 2020-11-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install material-ui-modal
pnpm add material-ui-modal
yarn add material-ui-modal
bun add material-ui-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-11-13 |
| First published | 2020-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daniel |
| Maintainers | danxiong |
| Keywords | material, ui, alert, modal, dialog, modal |

## Links

- npm: https://www.npmjs.com/package/material-ui-modal
- npm.io page: https://npm.io/package/material-ui-modal

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.56
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-11-13

## README

# material-ui-modal
Modal component based on react and material ui

```
npm install material-ui-modal
```



## First, import the provider in your index.js
```
import { AlertModalProvider, DialogModalProvider } from 'material-ui-modal';

ReactDOM.render(
    <AlertModalProvider>
        <DialogModalProvider>
            <App />
        </DialogModalProvider>
    </AlertModalProvider>,
    document.getElementById('root')
);

```


## Then, import the hook in your react component

```
import {useAlertModal,useDialogModal} from 'material-ui-modal'
```

## To use alert modal
```
const showAlertModal = useAlertModal();

showAlertModal({
    anchorOrigin,
    autoHideDuration,
    severity,
    title,
    message
})
```
#### We use snackbar options and alert options, find alert options here: https://material-ui.com/components/alert, snackbar options: https://material-ui.com/components/snackbars/#snackbar

## To use dialog modal
```
const showDialogModal = useDialogModal();

showDialogModal({
    title: 'Dialog Modal',//optional
    hideTitle:false,//optional
    hideActions: false,//optional
    render: () => {
        return (
            <AnyReactComponent />
        )
    }, //required, put any react component here, as the dialog content
    callback: (confirmed) => {
      if(confirmed){
        //add some logic
      }else{
        //add some logic
      }
    }, //optional
})
```

---
_Source: https://npm.io/package/material-ui-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._