@libromi/app-builder-react

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

Installation

npm install @libromi/app-builder-react

or

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: "[email protected]" },
      { id: 2, name: "Jane Smith", email: "[email protected]" }
    ],
    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