Using Iframes with React is simple but needs support for advanced use cases. These Four libraries exactly do that.

Using Iframes in React is straight forward. In fact, you don’t need any library at all to embed an Iframe. However, there are advanced use cases where we need the support of libraries.

For example, if we need the Iframe to be responsive, listen to different events inside Iframes, or encapsulate React components with Iframes? Either we need to code it ground up or use a library to handle the complexities.

So in this article, I will take you through four different libraries designed to address additional requirements when dealing with Iframes.

1. Responsive Iframes — iframe-resizer-react

When we are using Iframes, one of the most common issues we encounter is making them responsive and integrate well within the application. Otherwise, it’s likely to look different in devices such as mobiles. However, you can find ways to optimize the Iframes by writing some JavaScript code and CSS styles. However, it will require expertise to adjust the heights, width, scrolling, managing viewport, nested Iframes &, etc.

But what if you can find a library that simplifies this for you?

The NPM library iframe-resizer exactly does that. You can find the React wrapper around it, named iframe-resizer-react, for better integration.

The React library is relatively stable, having an active community passing 20k downloads per month (while its parent library has 100k+ downloads per month, further strengthening it).

Feature Summary

• Make the Iframe responsive, adjusting height, width, or custom sizing with scrolling.
• Works with multiple and nested Iframes.
• Domain authentication for cross-domain Iframes.
• Simplified messaging between Iframe and host page via postMessage.
• Fixes in-page links in Iframe and supports links between the Iframe and parent page.
• Exposes parent position and viewport size to the Iframe.
• Works with ViewerJS to support PDF and ODF document embedding.

You could also use Portals to implement responsive Iframes for React Applications in a de-facto canonical way.

And once you establish the reference to the mounted DOM nodes and create a portal, you are in full control of the event system and context to modify the Iframe, and it’s children as required.

2. Encapsulate React Components Inside Iframe — react-frame-component

Some of you might wonder, why do we need to use Iframes to encapsulate React components?

Although it’s not that common, there could be use cases where you are doing a legacy application migration, dealing with external React components that require encapsulation, Microfrontends &, etc.

The most exciting thing about the React Frame component is you can render a React application or a component inside an iframe with style encapsulation. You can style your components without affecting the parent document styles.

This “encapsulated” component can be developed, maintained, and delivered as an independent building block using Bit (Github). Bit will let you develop it as a modular and independent component, integrate and reuse it in your different projects, and even share it with your team.

This way you enjoy true autonomy in regard to authoring, testing, and delivering this Iframe-encapsulated component.

3. Render Child Windows and Elements in Iframes — react-window-provider

In some instances, we need to access the main window or document in React to apply styles, listen to events, measure the width and heights &, etc. However, when using Iframes, the target element is hosted in a different context with its window reference.

This library helps to provide the correct instance of a window or document to React components.

Suppose you are dealing with multiple Iframes, and your application needs access to the child elements and events. This library helps to handle them, hiding all the complexities involved from you.

4. Console Logs for Iframes — console-feed

Console Feed is a unique library, which is most useful when building development tools using React.

Console Feed provides a React component that displays console logs from the main window or Iframes visible in your User Interface.

The library is used by some of the popular development and code sharing tools such as;

• CodeSandbox.io
• Framer
• Plunker
• P5.js Editor
• Builder.io
• Utopia
• facebook/flipper
• Effector playground

Therefore, if you intend to build development tools with React that aid web development, this is a great library to display the logs in a UI component with custom filters and styles.

Conclusion

As you already know, embedding an Iframe is relatively straight forward with React. If you develop the page inside Iframe, you also have control over how it appears inside an Iframe. But, If it’s an external site, you might need to deal with additional complexities regarding responsiveness, communication, isolation &, etc.

Besides, you might get requirements to use Iframes for some internal reasons as described in the article, such as legacy components, working with multiple Iframes, Microfrontends &, etc.

Therefore, I hope the libraries discussed in the article help you understand the complexities of Iframes and solve some of them. Let me know if you come across any other useful Iframe libraries to React, and let me know in the comments below.

Thanks for Reading !!

Learn More