react-frame-component

What is react-frame-component?

The react-frame-component package allows you to render React components within an iframe. This can be useful for isolating styles, scripts, or for embedding third-party content within your React application.

What are react-frame-component's main functionalities?

Basic Usage

This feature allows you to render a simple React component inside an iframe. The Frame component wraps its children and renders them within an iframe.

import Frame from 'react-frame-component';

function App() {
  return (
    <Frame>
      <div>Hello from inside the iframe!</div>
    </Frame>
  );
}

Custom Head Content

This feature allows you to add custom content to the head of the iframe, such as stylesheets or scripts. The FrameContextConsumer provides access to the iframe's document and window objects.

import Frame, { FrameContextConsumer } from 'react-frame-component';

function App() {
  return (
    <Frame head={<><link rel="stylesheet" href="styles.css" /></>}>
      <FrameContextConsumer>
        {({ document, window }) => (
          <div>Hello with custom head content!</div>
        )}
      </FrameContextConsumer>
    </Frame>
  );
}

Styling Isolation

This feature allows you to isolate styles within the iframe, preventing them from affecting the rest of your application. This is useful for embedding third-party content or for creating isolated style environments.

import Frame from 'react-frame-component';
import './App.css';

function App() {
  return (
    <Frame>
      <div className="isolated-style">This is styled in isolation!</div>
    </Frame>
  );
}

Other packages similar to react-frame-component

react-iframe

The react-iframe package allows you to embed an iframe within your React application. It is more focused on embedding external URLs rather than rendering React components within the iframe. It does not provide the same level of integration with React components as react-frame-component.

react-iframe-resizer-super

The react-iframe-resizer-super package provides a React wrapper for the iframe-resizer library, which allows for dynamic resizing of iframes. While it focuses on resizing and communication between the iframe and the parent, it does not offer the same component rendering capabilities as react-frame-component.

react-portal

The react-portal package allows you to render React components into a DOM node that exists outside the DOM hierarchy of the parent component. While it provides a way to render components outside the main DOM tree, it does not specifically target iframes like react-frame-component.

README

React <Frame /> component

This component allows you to encapsulate your entire React application or per component in an iFrame.

npm install --save react-frame-component

How to use:

var Frame = require('react-frame-component');

Go check out the [demo] demo-url.

var Header = React.createClass({
  render: function() {
    return (
      <Frame>
        <h1>{this.props.children}</h1>
      </Frame>
    );
  }
});

React.renderComponent(<Header>Hello</Header>, document.body);

Or you can wrap it at the renderComponent call.

React.renderComponent(
  <Frame>
    <Header>Hello</Header>
  </Frame>,
  document.body
);

More info

I wrote a [blog post] blog-url about building this component.

License

Copyright 2014, Ryan Seddon. This content is released under the MIT license http://ryanseddon.mit-license.org