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
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import ModalProvider, { useModal } from 'mui-modal-provider';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContentText from '@material-ui/core/DialogContentText';
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
const HelloWorldDialog = ({
title,
description,
onCancel,
onConfirm,
...props
}) => (
<Dialog open={false} {...props}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>{description}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onCancel} color="primary">
Cancel
</Button>
<Button onClick={onConfirm} color="primary">
Ok
</Button>
</DialogActions>
</Dialog>
);
const Demo = () => {
const { showModal } = useModal();
const handleClick = () => {
let timeoutId;
const modal = showModal(HelloWorldDialog, {
title: 'Hello World',
description: 'description text',
onConfirm: () => modal.hide(),
onCancel: () => modal.hide(),
onExited: () => {
clearTimeout(timeoutId);
}
});
timeoutId = setTimeout(() => {
modal.update({
title: 'Updated hello world',
description: 'updated description text',
});
}, 1000);
};
return (
<Button
variant="contained"
onClick={handleClick}
color="primary"
>
show modal
</Button>
)
}
const App = () => (
<ModalProvider>
<Demo />
</ModalProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));