react-postmessage

Enable data communication between a react app and its embedded (via embed/iframe) react app.

Installation

npm:

npm install @chhoukdavy/react-postmessage

yarn:

yarn add @chhoukdavy/react-postmessage

pnpm:

pnpm add @chhoukdavy/react-postmessage

How it works

Usage

Coding example

In App1:

import { useEffect, useState } from "react";
import {
  attachParamsToUrl,
  Iframe,
  initRequester,
} from "@chhoukdavy/react-postmessage";
import "./App.css";

const URL = "http://localhost:3001";
const testData = {
  test: "sth from app1",
};

type Data = {
  test: string,
};

function App() {
  const [data, setData] = useState < Data > { test: "" };
  const [show, setShow] = useState < boolean > true;

  useEffect(() => {
    initRequester <
      Data >
      {
        url: URL,
        checkOrigin: true,
        data: testData,
        hook: setData,
        close: () => setShow(false),
      };
  }, []);

  const formedURL = attachParamsToUrl(URL, [
    {
      name: "fromOrigin",
      value: "http://localhost:3000",
    },
  ]);

  return (
    <div className="App">
      <h1>App1</h1>

      <div style={{ marginTop: 20, marginBottom: 20 }}>
        Data: {JSON.stringify(data)}
      </div>

      {show && (
        <div style={{ marginTop: 20 }}>
          <Iframe url={formedURL} width={400} height={250} />
        </div>
      )}
    </div>
  );
}

export default App;

In App2:

import { useEffect, useState } from "react";
import {
  initReceiver,
  cleanUp,
  postMessage,
  signalClose,
} from "@chhoukdavy/react-postmessage";
import "./App.css";

type HookData = {
  test: string;
};

function App() {
  const [fromOrigin, setFromOrigin] = useState<string>("");
  const [data, setData] = useState<HookData>();

  useEffect(() => {
    initReceiver<HookData>({
      fromOrigin,
      setFromOrigin,
      hook: setData,
      checkOrigin: true,
    });
    return cleanUp();
  }, [fromOrigin]);

  return (
    <div className="App">
      <h1>App2</h1>
      {data && (
        <>
          <p>Data: {JSON.stringify(data)}</p>
          <div>
            <button
              style={{ marginRight: 10 }}
              onClick={() => postMessage({ test: "sth from app2" }, fromOrigin)}
            >
              Send
            </button>
            <button onClick={() => signalClose(fromOrigin)}>Close</button>
          </div>
        </>
      )}
    </div>
  );
}

export default App;

For complete coding example, please find demonstration in the example folder.

Run example

Terminal 1: Run app1 on port 3000.

cd example/app1
yarn install
yarn start

Terminal 2: Run app2 on port 3001.

cd example/app2
yarn install
yarn start

In you browser, go to localhost:3000.

API Document

Components

| Name | Type | Props | Description | | -------- | ----------- | -------------------------------------------------------------------------- | ----------------------------------------- | | Iframe | component | url, height (Optional, Default: 450), width (Optional, Default: 450) | Iframe component to load another web app. |

Utilities

| Name | Type | Props | Description | | ------------------- | ------ | ----------------------------------------------------------------------------------------- | ------------------------------------- | | initRequester | func | url, checkOrigin (Optional), data (Optional), hook (Optional), close (Optional) | Init listener in the origin app. | | initReceiver | func | fromOrigin, setFromOrigin, checkOrigin (Optional), hook | Init listener in the destination app. | | postMessage | func | data, targetOrigin | Post message back to requester. | | signalClose | func | | Signal close from destination app. | | getParam | func | href, name | Get params (name) from url. | | attachParamsToUrl | func | url, params | Attach params to url. |

TODO

• Support for embed.
• Add tests.