svs-mui-modal-provider
v2.2.1
Published
[![codecov](https://codecov.io/gh/Quernest/mui-modal-provider/branch/master/graph/badge.svg?token=AL2WK480NF)](https://codecov.io/gh/Quernest/mui-modal-provider) [![package version](https://img.shields.io/npm/v/mui-modal-provider.svg?style=flat-square)](h
Downloads
8
Maintainers
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 { 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>
);
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
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