I have developed a React/Material UI application that includes a Portal which showcases a Panel and a Widget.
Main App: Show Portal and Set Background Color to Blue
export default function App() {
return (
<div
style={{
backgroundColor: "blue"
}}
>
<Portal></Portal>
</div>
);
}
You can access my codesandbox via this link: codesandbox.
The focal points of interest are Portal.js, and Layout.js.
Layout sets out specifications for different screen sizes in order to optimize the responsiveness of the Portal when adjusting to window dimensions.
Portal positions the Widget at the top left corner, and effectively "flexes" the Panel to shift below the widget at "xs" and "sm" breakpoints, and to the right of the widget at "md", "lg", and "xl" breakpoints.
While the Widget maintains its aspect ratio, its dimensions may vary depending on user interaction.
Portal incorporates two primary methods - the React functional component and the Material UI makeStyles function.
Portal: React Functional Component
export default function Portal() {
const selWidHeight = 400;
const selWidWidth = 800;
const layout = Layout(selWidHeight / selWidWidth);
const sizes = {
containerWidth: layout.selWidgetWidth,
containerHeight: layout.selWidgetHeight,
// more code here...
};
// more code here...
return (
<>
<>
// more code here...
</>
</>
);
}