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

import DraxlrEmbed from 'react-draxlr-embed'

function App() {
  return (
    <DraxlrEmbed
      id="YOUR_EMBED_ID"
      apiKey="YOUR_EMBED_KEY"
      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)}
    />
  )
}

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 | | options? | Record<string, any> | Custom options like filters and configuration | | 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 |