Call a modal or drawer from anywhere in my react app using simple a function.
I have made this work by using the root.render, but the problem with root.render they cannot found any of my previous providers, makeing me duplicate and import all providers again in this component. Is there a way to do this even if it’s not with the portal?
The code from the function:
const handleDelete = async () => {
try {
const res = await SheetManager(".KeyDrawerGlobal", "KeyEdit");
console.log(res);
} catch (error) {
console.error(error);
}
};
And this is the SheetManager code:
import React from "react";
import _ from "lodash";
import SheetComponent from "./SheetRegister";
import { SwipeableDrawer } from "@mui/material";
import { createPortal } from "react-dom";
const SheetManager = (container = "body", component = null, options = {}) => {
return new Promise((resolve, reject) => {
const parent = document.querySelector(container);
if (!parent) return reject();
const handleClose = (result) => {
if (result) resolve({ result });
reject();
};
createPortal(
<SwipeableDrawer
container={parent}
anchor="bottom"
open={true}
onClose={handleClose}
onOpen={() => {}}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
sx: {
position: "absolute !important",
},
componentsProps: {
backdrop: {
sx: {
position: "absolute !important",
},
},
},
}}
PaperProps={{
sx: {
position: "absolute !important",
borderTopLeftRadius: "16px",
borderTopRightRadius: "16px",
},
}}
>
<SheetComponent type={component} {...options} />
</SwipeableDrawer>,
document.body
);
});
};
export default SheetManager;
New contributor
Andre is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
I created a solution by using it like a Context, here is the result:
import {
SwipeableDrawer,
} from "@mui/material";
import React, { createContext, useState, useContext } from "react";
import { createPortal } from "react-dom";
import SheetComponent from "../components/core/sheet/SheetRegister";
const SheetContext = createContext();
export const useSheet = () => useContext(SheetContext);
let showSheet;
export const SheetProvider = ({ children }) => {
const [modal, setSheet] = useState(null);
showSheet = (container = "body", component, props) => {
const parent = document.querySelector(container);
return new Promise((resolve, reject) => {
const handleClose = (result) => {
setSheet(null);
if (result) resolve(result);
else reject();
};
setSheet({ container: parent, component, props, handleClose });
});
};
return (
<SheetContext.Provider value={showSheet}>
{children}
{modal &&
createPortal(
<SwipeableDrawer
container={modal.container}
anchor="bottom"
open={true}
onClose={() => modal.handleClose()}
onOpen={() => {}}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
sx: {
position: "absolute !important",
},
componentsProps: {
backdrop: {
sx: {
position: "absolute !important",
},
},
},
}}
PaperProps={{
sx: {
position: "absolute !important",
borderTopLeftRadius: "16px",
borderTopRightRadius: "16px",
},
}}
>
<SheetComponent
type={modal.component}
{...modal.props}
handleClose={modal.handleClose}
/>
</SwipeableDrawer>,
modal.container
)}
</SheetContext.Provider>
);
};
export { showSheet };
New contributor
Andre is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1