react-frame-component
Advanced tools
React component to wrap your application or component in an iFrame for encapsulation purposes
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.
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>
);
}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.
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.
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.
This component allows you to encapsulate your entire React application or per component in an iFrame.
npm install --save react-frame-component
import Frame from 'react-frame-component';
Go check out the demo.
const Header = ({ children }) => (
<Frame>
<h1>{children}</h1>
</Frame>
);
ReactDOM.render(<Header>Hello</Header>, document.body);
Or you can wrap it at the render call.
ReactDOM.render(
<Frame>
<Header>Hello</Header>
</Frame>,
document.body
);
head: PropTypes.node
The head prop is a dom node that gets inserted before the children of the frame. Note that this is injected into the body of frame (see the blog post for why). This has the benefit of being able to update and works for stylesheets.
initialContent: PropTypes.string
Defaults to '<!DOCTYPE html><html><head></head><body><div></div></body></html>'
The initialContent props is the initial html injected into frame. It is only injected once, but allows you to insert any html into the frame (e.g. a head tag, script tags, etc). Note that it does not update if you change the prop. Also at least one div is required in the body of the html, which we use to render the react dom into.
mountTarget: PropTypes.string
The mountTarget props is a css selector (#target/.target) that specifies where in the initialContent of the iframe, children will be mounted.
<Frame
initialContent='<!DOCTYPE html><html><head></head><body><h1>i wont be changed</h1><div id="mountHere"></div></body></html>'
mountTarget='#mountHere'
>
</Frame>
contentDidMount: PropTypes.func
contentDidUpdate: PropTypes.func
contentDidMount and contentDidUpdate are conceptually equivalent to
componentDidMount and componentDidUpdate, respectively. The reason these are
needed is because internally we call ReactDOM.render which starts a new set of
lifecycle calls. This set of lifecycle calls are sometimes triggered after the
lifecycle of the parent component, so these callbacks provide a hook to know
when the frame contents are mounted and updated.
ref: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }) ])
The ref prop provides a way to access inner iframe DOM node. To utilitize this prop use, for example, one of the React's built-in methods to create a ref: React.createRef() or React.useRef().
const MyComponent = (props) => {
const iframeRef = React.useRef();
React.useEffect(() => {
// Use iframeRef for:
// - focus managing
// - triggering imperative animations
// - integrating with third-party DOM libraries
iframeRef.current.focus()
}, [])
return (
<Frame ref={iframeRef}>
<InnerComponent />
</Frame>
);
}
The iframe's window and document may be accessed via the FrameContextConsumer or the useFrame hook.
The example with FrameContextConsumer:
import Frame, { FrameContextConsumer } from 'react-frame-component'
const MyComponent = (props, context) => (
<Frame>
<FrameContextConsumer>
{
// Callback is invoked with iframe's window and document instances
({document, window}) => {
// Render Children
}
}
</FrameContextConsumer>
</Frame>
);
The example with useFrame hook:
import Frame, { useFrame } from 'react-frame-component';
const InnerComponent = () => {
// Hook returns iframe's window and document instances from Frame context
const { document, window } = useFrame();
return null;
};
const OuterComponent = () => (
<Frame>
<InnerComponent />
</Frame>
);
I wrote a blog post about building this component.
Copyright 2014, Ryan Seddon. This content is released under the MIT license http://ryanseddon.mit-license.org
FAQs
React component to wrap your application or component in an iFrame for encapsulation purposes
The npm package react-frame-component receives a total of 123,824 weekly downloads. As such, react-frame-component popularity was classified as popular.
We found that react-frame-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.