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.
npm install mui-modal-provider # or yarn add mui-modal-provider
import React from 'react';
import { createRoot } from 'react-dom/client';
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';
interface SimpleDialogProps extends DialogProps {
title: string,
};
// Create the dialog you want to use
const SimpleDialog: React.FC<SimpleDialogProps> = ({ 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>
);
};
const container = document.getElementById('root');
const root = createRoot(container);
// Wrap the app with modal provider
root.render(
<ModalProvider>
<App />
</ModalProvider>
);
Property | Type | Default | Description | Required |
---|---|---|---|---|
legacy |
Boolean |
false |
Set to true if you want to use mui < 5 version. |
false |
suspense |
Boolean |
true |
Wraps your modal with the Suspense | false |
fallback |
Nullable<ReactNode> |
null |
Custom component for the Suspense fallback prop | false |
children |
ReactNode |
undefined |
- | true |
The rest will be added later... Look at examples 😊
See more examples in example folder
For Material-UI v4 use legacy
prop on the ModalProvider.
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
thenyarn link
then inside your linked project runyarn 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