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