react-draxlr-embed

Embed Draxlr dashboards into React applications easily.

Installation

To install the package, run the following command:

npm i react-draxlr-embed

Usage

1. Using Draxlr Embed

import DraxlrEmbed from 'react-draxlr-embed'

function App() {
  return (
    <DraxlrEmbed
      id="YOUR_EMBED_ID"
      apiKey="YOUR_EMBED_API_KEY"
      apiSecret="YOUR_EMBED_API_SECRET"
      type="dashboard"
      options={{
        filters: {
          filter1: { value: '1', hidden: true },
          filter2: { value: '2024-09-09', hidden: true },
        },
        configuration: { hideHeader: true },
      }}
      iframeStyle={{ width: "100%", height: "600px" }}
      onBeforeLoad={() => console.log('Loading...')}
      onAfterLoad={() => console.log('Load complete')}
      onError={(error) => console.error('Error:', error)}
    />
  )
}

2. Using embedUrl

import DraxlrEmbed from 'react-draxlr-embed'

<DraxlrEmbed
  id="YOUR_EMBED_ID"
  embedUrl="INSERT_EMBED_URL_FROM_YOUR_BACKEND_API"
  iframeStyle={{ width: "100%", height: "600px" }}
  onBeforeLoad={() => console.log('Loading...')}
  onAfterLoad={() => console.log('Load complete')}
  onError={(error) => console.error('Error:', error)}
/>

Props

| Prop | Type | Description | |----------------------|------------------------------------|--------------------------------------------------------------------| | wrapperClassName? | string | Custom classes to apply to the embed container | | iframeStyle? | string | Custom styles to apply to the embed iframe | | type | "dashboard" / "dashboardGroup" | Type of embed dashboard | | id | string | The unique ID of the dashboard or dashboard group | | apiKey | string | The embed API key | | apiSecret | string | The embed API secret | | embedUrl? | string | Pre-signed embed URL (from your backend API) | | options? | Record<string, any> | Custom options like filters and configuration | | region? | string | Specify the api region | | onBeforeLoad? | () => void | Function called just before the embed URLs called | | onAfterLoad? | () => void | Function called after the the embed URLs are called | | onError? | (error: Error) => void | Function called if an error occurs while fetching the embed URL |