README

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 '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/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')
);

Compatibility

For Material-UI v4 use legacy prop on the ModalProvider.

Examples

See more examples in example folder

Developing & linking locally

Because this module utilizes react hooks, it must be linked in a special way that is described here in this react github issue comment

Update the react and react-dom versions in this module’s package.json devDependencies match the versions in whatever project you’re linking them in.
yarn install in this module’s root directory
Because this module uses hooks, we need to link the module’s react dependency into the project we will be using to test the linked module
cd node_modules/react then yarn link then inside your linked project run yarn link react
In the linked project’s root directory run yarn install mui-modal-provider
Then in the module’s root directory run yarn link
In the linked project’s root directory run yarn link mui-modal-provider

Usage no npm install needed!