embed-pageplug v1.4.0

embed-pageplug

A React wrapper for embedding Pageplug apps.

Install

// with npm
$ npm install embed-pageplug  --save

// with yarn
$ yarn add embed-pageplug

Usage

import Pageplug from 'embed-pageplug';

function App() {
  const sample = { name: 'Sample data' }
  return (
    <Pageplug
      url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"
      data={sample}
    />
  );
}

export default App;

Options

<Pageplug> expects a url prop pointing to an embedded Pageplug application. You can generate this URL in the editor mode of a Pageplug app by clicking "Share" then "Public".

<Pageplug> will accept an optional data object, which is made available to the embedded application. When an embedded Pageplug application runs a Parent Window Query, <Pageplug> will check if data contains a key matching the Parent Window Query's selector, and if so, return that value to the query.

<Pageplug> will accept optional height and width props which will be used for the dimensions of the embedded window.

<Pageplug> will accept an optional onData callback that will be called with the data of an event that is sent from the embedded Pageplug app. These events can be sent from a JavaScript query inside of Pageplug by using the parent.postMessage() syntax.

<Pageplug> also accepts optional allow and sandbox parameters to configure permissions of the iframe used to embed the Pageplug app. allow-scripts and allow-same-origin are required in order to run Pageplug, so if sandbox is specified, allow-scripts and allow-same-origin will always be appended to ensure the Pageplug app works.

<Pageplug> will accept an optional styling prop object that can be used to pass in styles to the iframe component.

Example

Running yarn start will start an application with a basic Pageplug app embeded.

There is a live example here: https://embed-pageplug.surge.sh

Development

In the project directory, you can run:

yarn start

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

Publishing

1. Bump version with npm version [major|minor|patch]
2. Run yarn publish:npm. This will build the project in the /dst directory.
3. Navigate to /dst directory.
4. Publish to npm with npm publish

Testing

Tests exist in the /src/__tests__ directory. Running yarn test will run the test suite.

Support

Need help? Please report issues or requests to support@retool.com, through in app chat, or on https://community.retool.com/