react-iframe-resizer-super

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

Downloads in past

Stats

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

Readme

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.

Installation

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

Usage

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


const iframeResizerOptions = { checkOrigin: false };

const MyComponent = props => (
  <div>
    <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>
    </ReactIframeResizer>
    <p>Content After Iframe (style unaffected by iframe)</p>
  </div>
);

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 https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.8/iframeResizer.contentWindow.min.js. 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 }

Examples

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

Acknowledgements

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