@cube-dev/embed-sdk

React SDK for embedding Cube analytics into your applications.

Installation

yarn add @cube-dev/embed-sdk

Peer Dependencies

This package requires the following peer dependencies:

yarn add react react-dom @tanstack/react-query

Quick Start

import { useState } from 'react';
import { EmbedProvider, createDefaultReport, useReportContext } from '@cube-dev/embed-sdk';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  const [report, setReport] = useState(() => createDefaultReport({ title: 'My Report' }));

  return (
    <QueryClientProvider client={queryClient}>
      <EmbedProvider
        token={cubeApiToken}
        apiUrl={cubeApiUrl}
        report={report}
        onReportUpdate={(updates) => setReport((prev) => ({ ...prev, ...updates }))}
      >
        <YourAnalyticsComponent />
      </EmbedProvider>
    </QueryClientProvider>
  );
}

Exports

Providers

• EmbedProvider - Combined provider wrapping all contexts
• CubeApiContextProvider - Cube API client context
• DataAssetsContextProvider - Data assets and semantic views context
• ReportProvider - Report state management context
• ChartBuilderProvider - Chart building utilities context

Hooks

• useReportContext - Access report state and actions
• useChartBuilderContext - Access chart builder utilities
• useDataAssetsContext - Access data assets and semantic views
• useActiveCubeApi - Access the Cube API client
• useReport - Standalone report management hook

Utilities

• createDefaultReport - Create a new default report with optional title and SQL query
• parseSemanticSql - Parse semantic SQL queries
• generateSemanticSql - Generate semantic SQL from logical queries
• prepareTableData - Prepare data for table rendering
• prepareChartColumns - Prepare columns for chart rendering

License

MIT