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"
    />
  );
}

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)

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