Skip to content

🌞 Context API and Hooks based Modal Provider for react material-ui framework

License

Notifications You must be signed in to change notification settings

Quernest/mui-modal-provider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mui-modal-provider

codecov package version package downloads package license

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>
);

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 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 😊

Examples

See more examples in example folder

Compatibility

For Material-UI v4 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

  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