@libromi/app-builder-react v0.2.2

@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: "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

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