Package Exports

@libromi/app-builder-react
@libromi/app-builder-react/dist/index.esm.js
@libromi/app-builder-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@libromi/app-builder-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@libromi/app-builder-react

React component for embedding App Builder forms in your React applications.

Installation

npm install @libromi/app-builder-react

yarn add @libromi/app-builder-react

Usage

Basic Usage

import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY} // API key is required
      height="600px"
      width="100%"
    />
  );
}

Advanced Usage with Callbacks

import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  const handleSubmit = (data) => {
    console.log('Form submitted:', data);
    // Process the data
  };

  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY} // API key is required
      height="600px"
      width="100%"
      onSubmit={handleSubmit}
      theme="light" // or "dark"
    />
  );
}

Passing External Data Sources

You can provide external data to your app by passing the dataSources prop. This is useful for populating form fields with data from your application:

import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  // Example data to pass to the form
  const customerData = {
    customers: [
      { id: 1, name: "John Doe", email: "john@example.com" },
      { id: 2, name: "Jane Smith", email: "jane@example.com" }
    ],
    products: [
      { id: 101, name: "Product A", price: 99.99 },
      { id: 102, name: "Product B", price: 149.99 }
    ]
  };

  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY}
      dataSources={customerData}
      onSubmit={(data) => console.log('Form submitted:', data)}
    />
  );
}

The data you provide will be available in your app's local data sources, allowing you to map it to form fields using the data mapping feature in the app builder.

Custom API URL

If your API and embed.js script are hosted on a different domain, you can specify a custom base URL:

import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY}
      baseUrl="https://your-api.com"
      height="600px"
      width="100%"
    />
  );
}

The component will load the embed.js script from {baseUrl}/embed.js and use the same baseUrl for API calls.

Props

Prop	Type	Required	Description
appId	string	Yes	The ID of the app to embed
apiKey	string	Yes	Your API key for authentication
height	string \| number	No	Height of the embedded form (default: "600px")
width	string \| number	No	Width of the embedded form (default: "100%")
theme	"light" \| "dark" \| string	No	Theme for the form
onSubmit	function	No	Callback function when form is submitted
onValidate	function	No	Callback function for custom validation
className	string	No	Additional CSS class for the container
style	object	No	Additional inline styles for the container
baseUrl	string	No	Custom base URL for the API and embed.js script (default: current domain)
dataSources	object	No	External data to pass to the form

Environment Variables

For security, it's recommended to store your API key in an environment variable:

# .env file
REACT_APP_FORM_BUILDER_API_KEY=your_api_key_here

Then access it in your code:

apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY}

License

MIT