React Iframe Resizer With Super-Powers (cross domain, resize, etc)

Downloads in past


0.2.25 years ago7 years agoMinified + gzip package size for react-iframe-resizer-super in KB


React Iframe Resizer With Super-Powers (cross domain, resize, etc)
This is a versatile React Component which renders an iframe and wires in the excellent Iframe Resizer library.
This Component was created with the React CDK by the great folks at Kadira.
NOTE: Renamed to react-iframe-resizer-super because there is already a react-iframe-resier npm package.


npm install --save react-iframe-resizer-super iframe-resizer


import ReactIframeResizer from 'react-iframe-resizer-super';

const iframeResizerOptions = { checkOrigin: false };

const MyComponent = props => (
    <p>Content Before Iframe (style unaffected by iframe)</p>
    <ReactIframeResizer iframeResizerOptions={iframeResizerOptions}>
      <style>p { color: green; }</style>
      <p>Here is some green text, inside an iframe</p>
    <p>Content After Iframe (style unaffected by iframe)</p>

Props supported

  • content (string) iframe document option 1. - content of HTML to load in the iframe
  • src (string) iframe document option 2. - src to a URL to load in the iframe
  • iframeResizerEnable (bool) true
  • iframeResizerOptions (object) see all supported
iframe-resizer options.
  • iframeResizerUrl (string || bool) URL to the client JS for injecting into the
iframe. This only works for content type, at the moment. The default URL is If you wanted to disable this, you could set it to {false}
  • frameBorder (number) 0 optionally set a frameBorder
  • id (string) optionally set an id property
  • className (string) optionally set a className property
  • style (object) optionally set a style property
default { width: '100%', minHeight: 20 }


See our stories/demos at and the source of the stories/demo. and of course, more about iframe-resizer which is where most of the iframe magic happens.


excellent and deals well with crappy browsers. (caution: do not try to roll your own) easy to create, document, test, and share.