quarks-ui-iframe-resizer
v0.0.2
Published
React Iframe Resizer With Super-Powers (cross domain, resize, etc)
Downloads
1
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 iframesrc
(string) iframe document option 2. - src to a URL to load in the iframeiframeResizerEnable
(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 forcontent
type, at the moment. The default URL ishttps://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 frameBorderid
(string) optionally set an id propertyclassName
(string) optionally set a className propertystyle
(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
- Iframe Resizer library is excellent and deals well with crappy browsers. (caution: do not try to roll your own)
- React CDK makes react Components easy to create, document, test, and share.