https://github.com/quernest/mui-modal-provider
🌞 Context API and Hooks based Modal Provider for react material-ui framework
https://github.com/quernest/mui-modal-provider
context context-api context-api-react hooks material-ui material-ui-components material-ui-react modal mui react react-component react-hooks react-material-ui react-modal react-modal-component react-modal-dialog react-typescript reactjs typescript
Last synced: 3 months ago
JSON representation
🌞 Context API and Hooks based Modal Provider for react material-ui framework
- Host: GitHub
- URL: https://github.com/quernest/mui-modal-provider
- Owner: Quernest
- License: mit
- Created: 2020-01-20T22:13:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-26T20:39:11.000Z (5 months ago)
- Last Synced: 2025-04-03T23:09:06.910Z (3 months ago)
- Topics: context, context-api, context-api-react, hooks, material-ui, material-ui-components, material-ui-react, modal, mui, react, react-component, react-hooks, react-material-ui, react-modal, react-modal-component, react-modal-dialog, react-typescript, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 1.7 MB
- Stars: 79
- Watchers: 1
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mui-modal-provider
[](https://codecov.io/gh/Quernest/mui-modal-provider)
[](https://www.npmjs.com/package/mui-modal-provider)
[](https://www.npmjs.com/package/mui-modal-provider)
[](https://www.npmjs.com/package/mui-modal-provider)
MUI-modal-provider is a helper based on [Context API](https://en.reactjs.org/docs/context.html) and [React Hooks](https://en.reactjs.org/docs/hooks-intro.html) for simplified work with modals (dialogs) built on [Material-UI](https://www.material-ui.com) or custom solutions with suitable props.
## Install
```bash
npm install mui-modal-provider # or yarn add mui-modal-provider
```
## Usage
```jsx
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 = ({ title, ...props }) => (
{title}
);
// Use modal hook and show the dialog
const App = () => {
const { showModal } = useModal();
return (
showModal(SimpleDialog, { title: 'Simple Dialog' })}
color="primary"
>
simple dialog
);
};
const container = document.getElementById('root');
const root = createRoot(container);
// Wrap the app with modal provider
root.render(
);
```
## API
### Modal Provider
| 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](https://beta.reactjs.org/reference/react/Suspense) | false |
| `fallback` | `Nullable` | `null` | Custom component for the Suspense [fallback](https://beta.reactjs.org/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) prop | false |
| `children` | `ReactNode` | `undefined` | - | true
*The rest will be added later... Look at examples* 😊
## Examples
See more examples in [example](https://github.com/Quernest/mui-modal-provider/tree/master/example) folder
## Compatibility
For [Material-UI v4](https://v4.mui.com/) use `legacy` prop on the ModalProvider.
## 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](https://github.com/facebook/react/issues/14257#issuecomment-439967377)
1. 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.
2. `yarn install` in this module’s root directory
3. 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
4. `cd node_modules/react` then `yarn link` then inside your linked project run `yarn link react`
5. In the linked project’s root directory run `yarn install mui-modal-provider`
6. Then in the module’s root directory run `yarn link`
7. In the linked project’s root directory run `yarn link mui-modal-provider`