https://github.com/zeroasterisk/react-iframe-resizer-super
inject HTML into an iframe, and/or resize an iframe to the height of it's contents
https://github.com/zeroasterisk/react-iframe-resizer-super
Last synced: 11 months ago
JSON representation
inject HTML into an iframe, and/or resize an iframe to the height of it's contents
- Host: GitHub
- URL: https://github.com/zeroasterisk/react-iframe-resizer-super
- Owner: zeroasterisk
- License: mit
- Created: 2017-02-12T23:30:49.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-11-07T10:58:25.000Z (over 6 years ago)
- Last Synced: 2025-05-19T16:18:47.382Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://zeroasterisk.github.io/react-iframe-resizer-super
- Size: 240 KB
- Stars: 50
- Watchers: 3
- Forks: 20
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Iframe Resizer With Super-Powers (cross domain, resize, etc)
This is a versatile [React](https://facebook.github.io/react/) Component
which renders an iframe and wires in the excellent
[Iframe Resizer](http://davidjbradshaw.github.io/iframe-resizer/) library.
This Component was created with the
[React CDK](https://github.com/kadirahq/react-cdk)
by the great folks at [Kadira](https://github.com/kadirahq).
NOTE: Renamed to `react-iframe-resizer-super` because there is already a `react-iframe-resier` npm package.
## Installation
```sh
npm install --save react-iframe-resizer-super iframe-resizer
```
## Usage
```jsx
import ReactIframeResizer from 'react-iframe-resizer-super';
const iframeResizerOptions = { checkOrigin: false };
const MyComponent = props => (
Content Before Iframe (style unaffected by iframe)
p { color: green; }
Here is some green text, inside an iframe
Content After Iframe (style unaffected by iframe)
);
```
### 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](http://davidjbradshaw.github.io/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](https://zeroasterisk.github.io/react-iframe-resizer-super)
and the
[source of the stories/demo](https://github.com/zeroasterisk/react-iframe-resizer-super/blob/master/src/stories/index.js).
and of course, more about
[iframe-resizer](http://davidjbradshaw.github.io/iframe-resizer/)
which is where most of the iframe magic happens.
## Acknowledgements
* [Iframe Resizer](http://davidjbradshaw.com/iframe-resizer/) library is
excellent and deals well with crappy browsers.
_(caution: do not try to roll your own)_
* [React CDK](https://github.com/kadirahq/react-cdk) makes react Components
easy to create, document, test, and share.