mui-modal-provider

mui-modal-provider

MUI-modal-provider is a helper based on Context API and React Hooks for simplified work with modals (dialogs) built on Material-UI or custom solutions with suitable props.

Install

npm install mui-modal-provider # or yarn add mui-modal-provider

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ModalProvider, { useModal } from 'mui-modal-provider';
import Dialog, { DialogProps } from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';

type Props = DialogProps & {
  title: string;
};

// ✔️ create the dialog you want to use
const SimpleDialog: React.FC<Props> = ({ title, ...props }) => (
  <Dialog {...props}>
    <DialogTitle>{title}</DialogTitle>
  </Dialog>
);

// ✔️ use modal hook and show the dialog
const App = () => {
  const { showModal } = useModal();

  return (
    <Button
      variant="contained"
      onClick={() => showModal(SimpleDialog, { title: 'Simple Dialog' })}
      color="primary"
    >
      simple dialog
    </Button>
  );
};

// ✔️ wrap the app with modal provider
ReactDOM.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
  document.getElementById('root')
);

For Material-UI v5 use beta={true} prop on the ModalProvider.

See more examples in example folder