Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pbojinov/react-iframe-comm
React iFrame communication - talk to your iFrames via postMessage
https://github.com/pbojinov/react-iframe-comm
Last synced: 18 days ago
JSON representation
React iFrame communication - talk to your iFrames via postMessage
- Host: GitHub
- URL: https://github.com/pbojinov/react-iframe-comm
- Owner: pbojinov
- License: mit
- Created: 2017-03-15T23:29:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-09-20T13:37:04.000Z (about 2 years ago)
- Last Synced: 2024-10-19T11:15:25.092Z (25 days ago)
- Language: JavaScript
- Homepage: https://pbojinov.github.io/react-iframe-comm/
- Size: 940 KB
- Stars: 65
- Watchers: 2
- Forks: 15
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React iFrame communication
============
> A React component for communicating between a parent window and an iframe.
## Demo
Live Demo: [https://pbojinov.github.io/react-iframe-comm/](https://pbojinov.github.io/react-iframe-comm/)
Or locally run:
```
npm install
npm run storybook
```
Then open [http://localhost:9009/](http://localhost:9009/) in your browser.
## Installation
The easiest way to use React Iframe Communication is to install it from NPM.
```
npm install react-iframe-comm --save
```
At this point you can import `react-iframe-comm` in your application as follows:
```javascript
import IframeComm from 'react-iframe-comm';
```
## Usage
```javascript
import React from "react";
import IframeComm from "react-iframe-comm";
const Demo = ({}) => {
// the html attributes to create the iframe with
// make sure you use camelCase attribute names
const attributes = {
src: "https://pbojinov.github.io/iframe-communication/iframe.html",
width: "100%",
height: "175",
frameBorder: 1, // show frame border just for fun...
};
// the postMessage data you want to send to your iframe
// it will be send after the iframe has loaded
const postMessageData = "hello iframe";
// parent received a message from iframe
const onReceiveMessage = () => {
console.log("onReceiveMessage");
};
// iframe has loaded
const onReady = () => {
console.log("onReady");
};
return (
);
};
export default Demo;
```
## Configuration Options
```javascript
IframeComm.propTypes = {
/*
Iframe Attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes
React Supported Attributes
https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes
Note: attributes are camelCase, not all lowercase as usually defined.
*/
attributes: PropTypes.shape({
allowFullScreen: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool
]),
frameBorder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
name: PropTypes.string,
scrolling: PropTypes.string,
// https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
sandbox: PropTypes.string,
srcDoc: PropTypes.string,
src: PropTypes.string.isRequired,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}),
// Callback function called when iFrame sends the parent window a message.
handleReceiveMessage: PropTypes.func,
/*
Callback function called when iframe loads.
We're simply listening to the iframe's `window.onload`.
To ensure communication code in your iframe is totally loaded,
you can implement a syn-ack TCP-like handshake using `postMessageData` and `handleReceiveMessage`.
*/
handleReady: PropTypes.func,
/*
You can pass it anything you want, we'll serialize to a string
preferablly use a simple string message or an object.
If you use an object, you need to follow the same naming convention
in the iframe so you can parse it accordingly.
*/
postMessageData: PropTypes.any.isRequired,
/*
Enable use of the browser's built-in structured clone algorithm for serialization
by settings this to `false`.
Default is `true`, using our built in logic for serializing everything to a string.
*/
serializeMessage: PropTypes.bool,
/*
Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.
*/
targetOrigin: PropTypes.string
};
```
## License
The MIT License (MIT) - 2017