Skip to content

Commit 2abf950

Browse files
author
Flaviu Tamas
committed
Add retool type definitions
1 parent 159180f commit 2abf950

File tree

3 files changed

+59
-2
lines changed

3 files changed

+59
-2
lines changed

package.json

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
"url": "https://github.com/tryretool/react-retool/blob/main/LICENSE"
1313
}
1414
],
15+
"types": "Retool.d.ts",
16+
"main": "Retool.js",
17+
"type": "commonjs",
1518
"keywords": [
1619
"react",
1720
"react-component",
@@ -37,14 +40,20 @@
3740
},
3841
"peerDependencies": {
3942
"react": ">=17.0.0",
40-
"react-dom": ">=17.0.0"
43+
"react-dom": ">=17.0.0",
44+
"@types/react": ">=17.0.0"
45+
},
46+
"peerDependenciesMeta": {
47+
"@types/react": {
48+
"optional": true
49+
}
4150
},
4251
"scripts": {
4352
"start": "react-scripts start",
4453
"build": "react-scripts build",
4554
"test": "react-scripts test",
4655
"eject": "react-scripts eject",
47-
"publish:npm": "rm -rf dst && mkdir dst && babel src/components -d dst --copy-files && mv ./dst/Retool.js ./dst/index.js && cp ./package.json ./dst/package.json && cp ./README.md ./dst/README.md"
56+
"publish:npm": "babel src/components --copy-files --extensions .js,.jsx -d dst --source-maps && cp ./package.json ./dst/package.json && cp ./README.md ./dst/README.md"
4857
},
4958
"eslintConfig": {
5059
"extends": [

src/components/Retool.d.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import * as React from 'react';
2+
3+
export interface RetoolProps<T> {
4+
/**
5+
* url prop pointing to an embedded Retool application. You can generate this URL in the editor
6+
* mode of a Retool app by clicking "Share" then "Public".
7+
*/
8+
url: string
9+
/**
10+
* an optional data object, which is made available to the embedded application. When an embedded
11+
* Retool application runs a Parent Window Query, <Retool> will check if data contains a key
12+
* matching the Parent Window Query's selector, and if so, return that value to the query.
13+
*/
14+
data?: Record<string, T>
15+
/**
16+
* optional height and width props which will be used for the dimensions of the embedded window.
17+
*/
18+
height?: string | number
19+
/**
20+
* optional height and width props which will be used for the dimensions of the embedded window.
21+
*/
22+
width?: string | number
23+
/**
24+
* optional onData callback that will be called with the data of an event that is sent from the
25+
* embedded Retool app. These events can be sent from a JavaScript query inside of Retool by using
26+
* the parent.postMessage() syntax.
27+
*/
28+
onData?: (data: T) => void
29+
/**
30+
* optional sandbox parameter to configure permissions of the iframe used to embed the Retool
31+
* app. allow-scripts and allow-same-origin are required in order to run Retool, so if sandbox is
32+
* specified, allow-scripts and allow-same-origin will always be appended to ensure the Retool app
33+
* works.
34+
*/
35+
sandbox?: boolean | string
36+
/**
37+
* optional allow parameter to configure permissions of the iframe used to embed the Retool app.
38+
*/
39+
allow?: string
40+
/**
41+
* optional styling prop object that can be used to pass in styles to the iframe component.
42+
*/
43+
styling?: React.CSSProperties
44+
}
45+
46+
declare const Retool: <T> (props: RetoolProps<T>) => React.ReactElement
47+
48+
export default Retool

src/components/retool.css

Whitespace-only changes.

0 commit comments

Comments
 (0)