react-retool

react-retool

A React wrapper for embedding Retool apps.

Install

// with npm
$ npm install react-retool  --save

// with yarn
$ yarn add react-retool

Usage

import Retool from 'react-retool';

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

export default App;

Options

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

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

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

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

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

<Retool> 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 Retool app embeded.

There is a live example here: https://react-retool.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

• Bump version with npm version [major|minor|patch]
• Run yarn publish:npm. This will build the project in the /dst directory.
• Navigate to /dst directory.
• 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 [e-mail], through in app chat, or on https://community.retool.com/