diff --git a/package.json b/package.json index 91f409a..6798c76 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,9 @@ "url": "https://github.com/tryretool/react-retool/blob/main/LICENSE" } ], + "types": "Retool.d.ts", + "main": "Retool.js", + "type": "commonjs", "keywords": [ "react", "react-component", @@ -37,14 +40,20 @@ }, "peerDependencies": { "react": ">=17.0.0", - "react-dom": ">=17.0.0" + "react-dom": ">=17.0.0", + "@types/react": ">=17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "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" + "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" }, "eslintConfig": { "extends": [ diff --git a/src/components/Retool.d.ts b/src/components/Retool.d.ts new file mode 100644 index 0000000..3106ae4 --- /dev/null +++ b/src/components/Retool.d.ts @@ -0,0 +1,48 @@ +import * as React from 'react'; + +export interface RetoolProps { + /** + * 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". + */ + url: string + /** + * an optional data object, which is made available to the embedded application. When an embedded + * Retool application runs a Parent Window Query, will check if data contains a key + * matching the Parent Window Query's selector, and if so, return that value to the query. + */ + data?: Record + /** + * optional height and width props which will be used for the dimensions of the embedded window. + */ + height?: string | number + /** + * optional height and width props which will be used for the dimensions of the embedded window. + */ + width?: string | number + /** + * 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. + */ + onData?: (data: T) => void + /** + * optional sandbox parameter 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. + */ + sandbox?: boolean | string + /** + * optional allow parameter to configure permissions of the iframe used to embed the Retool app. + */ + allow?: string + /** + * optional styling prop object that can be used to pass in styles to the iframe component. + */ + styling?: React.CSSProperties +} + +declare const Retool: (props: RetoolProps) => React.ReactElement + +export default Retool