Embed Apps in React
Native embedding in your React-based Web App
First, install the Lowcoder SDK. Lowcoder publishes with every Version Release a new version of Lowcoder SDK too.https://www.npmjs.com/package/lowcoder-sdk
yarn:
yarn add lowcoder-sdknpm:
npm install lowcoder-sdkIntegrate an Lowcoder App or Module into your existing app
Publish your app/module in Lowcoder.
Set the app/module's access privilege as public.
Add code in your existing app as below.
Import CSS styles
import "lowcoder-sdk/dist/style.css";For React app:
import { LowcoderAppView } from "lowcoder-sdk";<LowcoderAppView appId="{YOUR_APPLICATION_ID}" />;Properties
appId
string
The app's id is required!
--
baseUrl
string
The api base url of the Lowcoder Instance.
https://api-service.lowcoder.cloud
onModuleEventTriggered
(eventName: string) => void
(Only for Modules) Triggered when module's custom event is triggered. Works only when the app is a module.
--
onModuleOutputChange
(output: any) => void
(Only for Modules) Triggered when module's outputs change. Works only when the app is a module.
--
Modules are special Apps, which make bidirectional communication between your app and the Lowcoder Module possible. You can send data to Module-Inputs and receive Data back via Module Outputs. Also, you can trigger Methods and listen to Events.
Invoke module methods
import { useRef } from "ref";import { LowcoderAppView } from "lowcoder-sdk";function MyExistingAppPage() { const appRef = useRef(); return ( <div> <LowcoderAppView appId={YOUR_APPLICATION_ID} ref={appRef} />; <button onClick={() => appRef.current?.invokeMethod("some-method-name")}> Invoke method </button> </div> );}For vanilla js:
import { bootstrapAppAt } from "lowcoder-sdk";const node = document.querySelector("#my-app");async function bootstrap() { const instance = await bootstrapAppAt(YOUR_APPLICATION_ID, node); // set module inputs instance.setModuleInputs({ input1: "xxx", input2: "xxx" }); // invoke module methods instance.setModuleInputs({ input1: "xxx", input2: "xxx" }); // listen module event trigger instance.on("moduleEventTriggered", (eventName) => { console.info("event triggered:", eventName); }); // listen module output change instance.on("moduleOutputChange", (data) => { console.info("output data:", data); });}Last updated
Was this helpful?