├── .babelrc ├── .gitignore ├── README.md ├── custom-component-guide-example.json ├── dist ├── examples │ ├── growing_button.js │ ├── growing_button.js.LICENSE.txt │ ├── horizontal_stepper.js │ └── horizontal_stepper.js.LICENSE.txt ├── index.js └── index.js.LICENSE.txt ├── package.json ├── src ├── ExampleComponent.js ├── examples │ ├── GrowingButton │ │ ├── Button.js │ │ ├── index.js │ │ └── styles.css │ ├── HorizontalStepper │ │ ├── HorizontalStepper.js │ │ ├── index.js │ │ └── styles.css │ └── README.md └── index.js ├── webpack.config.js ├── webpack.examples.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ "@babel/preset-env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": [ 7 | "last 2 Chrome versions", 8 | "last 2 Firefox versions", 9 | "last 2 Safari versions", 10 | "last 2 iOS versions", 11 | "last 1 Android version", 12 | "last 1 ChromeAndroid version", 13 | "ie 11" 14 | ] 15 | } 16 | } ], 17 | "@babel/preset-react" 18 | ], 19 | "plugins": [ "@babel/plugin-proposal-class-properties" ] 20 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .yarn/ 3 | .yarnrc -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Retool + BYO: React Custom Components 2 | If you have a use case that isn't handled by Retool's built-in components, you can build your own custom component to solve that use case. Really anything that can be compiled down to javascript can be used within Retool's custom components. While Retool allows you to write React directly within its iframe code, you may find it limiting in regards to development environment or packages that can be added; this repository breaks down both barriers. 3 | 4 | The purpose of this repository is to give a React developer a baseline development envrionment that includes 5 | - local development of your custom component available within your Retool app 6 | - an example of hot reload within the Retool sandbox'd iframe 7 | - add any npm package to use in the component library 8 | - bring your own component library example 9 | - examples of reading or updating data in your Retool app 10 | - examples of triggering queries 11 | - moving from development to production either inline or through a CDN 12 | 13 | We are accepting bugs and feature requests to this repository through issues. 14 | 15 | # Getting Started 16 | 17 | Getting started with local development happens in two parts, cloning this repository and setting up your Retool application to listen to it: 18 | 19 | 1. Setting up local environment 20 | - Clone repository 21 | - Install dependendencies 22 | 2. Setting up Retool application 23 | - Add a custom component to the application 24 | - Update the component's iFrame Code 25 | - Update the component's Model 26 | 27 | ## Setting up local environment 28 | 29 | ```shell 30 | git clone git@github.com:tryretool/custom-component-guide.git 31 | cd custom-component-guide 32 | yarn install 33 | yarn dev 34 | ``` 35 | 36 | After starting the webpack dev server with `yarn dev` and the example dev server servers your built javascript at `http://localhost:8080/main.js`. Once the dev server is running, open up a Retool application, and drag a custom component on to the canvas. 37 | 38 | In the component inspector, replace the default iFrame code with the following: 39 | 40 | ```html 41 |