mmp

mui-modal-provider

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

Showing:

Popularity

Downloads/wk

470

GitHub Stars

15

Maintenance

Last Commit

1mo ago

Contributors

3

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

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 ReactDOM from 'react-dom';
import ModalProvider, { useModal } from 'mui-modal-provider';
import Dialog, { DialogProps } from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/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')
);

For Material-UI v5 use beta={true} prop on the ModalProvider.

See more examples in example folder

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100