Is it possible to incorporate MUI React components within an iframe?

Looking to replicate the style seen in this Material UI website screenshot, I aim to design a container that will encompass my iframe contents, such as the navBar and menu drawer. However, I want to utilize Material UI's components for these elements. How should I tackle this task?

The challenge I'm currently facing is that while my nav bar remains within the iframe, it appears that the drawer will slide out from the browser window instead of the designated iframe box.

To further complicate matters, I need to embed an additional iframe within this existing one to house my text content.https://i.stack.imgur.com/USQGP.png

htmlcssreactjsiframematerial-ui

Answer №1

Here is a practical demonstration of the concept you mentioned: Final outcome:

Main Page https://stackblitz.com/edit/react18-mui-srfhzb?file=Drawer.jsx,App.tsx

Iframe Content https://stackblitz.com/edit/react18-mui-c69cpe?file=Drawer.jsx,App.tsx

https://i.stack.imgur.com/T2Aer.png

Code:

import * as React from 'react';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';

export default function TemporaryDrawer() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen) => () => {
    setOpen(newOpen);
  };

  return (
    <div>
      <Button onClick={toggleDrawer(true)}>Open drawer</Button>
      <Drawer open={open} onClose={toggleDrawer(false)}>
        Example Drawer
      </Drawer>
    </div>
  );
}

Usage:

<Box sx={{ width: '90%', margin: 'auto' }}>
  <iframe
    src="your-iframe-page-url"
    title="description"></iframe>
</Box>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an error that states "this.push is not a function" when trying to select the 2nd or 3rd option

My goal is to extract elements from a drop-down menu and populate a list box based on the selection. The selected value from one list box should then be transferred to another list box, specifically from Available to Selected. However, while selecting Deve ...

htmlangularjsarrays

How can child components in ReactJS be conditionally rendered based on the status of userData loading?

It seems like there might be an issue with how we handle user login in our application. Whenever a user logs in, the redux state is updated with the server response. Many components rely on this logged-in status. We pass the currentUser object down to all ...

javascriptreactjs

Accessing a hyperlink within the existing page

How can I make a hyperlink in an HTML document that opens the linked document (link1.html) under the link on the same page? links.html: <body> <h3>Links</h3< <a href="link1.html">link1</a> </body> Desired out ...

html

Pictures fail to load unless I refresh the Next JS application

I've been facing some difficulties with images on Next.js recently. I am aware that Next has stopped supporting the use of static in favor of the public directory. Despite making the necessary changes, I still cannot get images to load properly. Here ...

reactjsmongodbexpressnext.js

Managing compatibility with IE11 for all dependent packages: Best practices

Currently, I am working on a React app using version 17.0 and Next.js version 11.1.2 among other stacks. While Next.js typically supports IE11 by default, I have encountered issues with compatibility after adding certain packages to my project. The consol ...

reactjswebpacknext.jsbabeljsinternet-explorer-11

Heroku Internal Server Error with NextJs version 5.0.0

Below are the scripts that I am using: "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js", "heroku-postbuild": "next build" }, This is the content of my procfile: web: npm start ...

javascriptreactjsherokudeploymentnext.js

Creating personalized themes in Material-UI

I am working on creating a unique theme and customizing various Material-UI components. Following the guidelines provided in this customization tutorial from Material-UI, I have made progress in the following areas: Creating a customized theme: //MUI THE ...

reactjsmaterial-uithemes

How to disable the underline styling for autocomplete in a React Material UI component

Seeking assistance with removing underline styling and changing text color upon focus within the autocomplete component of React Material UI. Struggling to locate the specific style needing modification. Appreciate any help in advance! ...

javascriptcssreactjsmaterial-ui

Modifying element values on click events in ReactJS

A Material UI submenu is being dynamically populated from a JSON file. The main menu item hosting this submenu will change based on user selection. Refer to the image below for clarification: https://i.stack.imgur.com/DCzMj.png The main menu item contain ...

reactjsmaterial-ui

Is it possible to merge two HTML selectors using jQuery?

In my HTML, I have two button elements defined as follows: <input type="button" class="button-a" value="Button a"/> <input type="button" class="button-b" value="Button b"/> When either of these buttons is clicked, I want to trigger the same ...

jqueryhtml

The onClick event handler fails to trigger in React

Original Source: https://gist.github.com/Schachte/a95efbf7be0c4524d1e9ac2d7e12161c An onClick event is attached to a button. It used to work with an old modal but now, with a new modal, it does not trigger. The problematic line seems to be: <button cla ...

javascriptreactjs

How can I retrieve text within a p tag using xpath and xpath axes?

<div class="details"> <p><b>Compatibility:</b> All versions</p> <p><b>Category:</b> Entertainment</p> <p><b>Updated:</b> Apr 2, 2014</p> <p><b>Version ...

htmlxpath

Using websockets in a React client application

Attempting to establish a connection with a backend layer running on localhost, here is the provided source code: const { createServer } = require("http"); const cors = require("cors"); const photos = require("./photos"); const app = require("express")( ...

javascriptnode.jsreactjsexpresswebsocket

List with pulldown options

I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...

javascriptcssangular

Display react-select option values on webpage for extraction by Selenium

Our frontend is built with React and we utilize react-select for all dropdown menus. Additionally, we have existing Selenium-based automation testing set up. With Selenium, we can currently retrieve the display text (label) of each option in the expanded d ...

reactjsseleniumreact-select

Having trouble retrieving the data from the second child object in an object returned by an API call in a

Having trouble accessing the second child object of an object generated by an API response. The weather API in question can be found at . Refer to Display.js for a detailed explanation. App.js import React,{useState} from 'react'; import Navbar ...

javascriptreactjsjsonjsxresponse

Creating movement in three distinct divisions

I am seeking a way to have three divs flying in upon click. The first DIV is positioned at the top, followed by one on the left and one on the right (both being below the top one). I wish for them to fly in from their respective directions - the top div fr ...

javascriptjqueryhtmlcss

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...

javascripthtmlangularproperty-binding

What is the trick to have a CSS element overflow the boundaries of its containing div entirely?

Currently, I have a JS Fiddle project where I am attempting to achieve a specific effect. In the project, there is a circle positioned at the center of a div. When the script runs, the circle expands evenly in all directions until it reaches the borders on ...

javascriptjqueryhtmlcss

How can I retrieve the index of a v-for loop within a function in Vue.js HTML?

How can I splice the array from the fields in HTML Vue JS if the status is true? I also need to pass the index value to a function. Is this possible? The error I am encountering is: Uncaught ReferenceError: index is not defined at Object.success (80 ...

javascripthtmlvue.jsvue-component