@bonnard/react

React components for embedding Bonnard charts and dashboards in any React app.

Install

npm install @bonnard/react @bonnard/sdk

Quick Start

1. Add the provider

import { BonnardProvider } from '@bonnard/react';
import '@bonnard/react/styles.css';

function App() {
  return (
    <BonnardProvider config={{ apiKey: 'bon_pk_...' }}>
      <MyAnalyticsPage />
    </BonnardProvider>
  );
}

2. Render a chart

import { BarChart } from '@bonnard/react';

function RevenueByCategory() {
  return (
    <BarChart
      title="Revenue by Category"
      measures={['orders.revenue']}
      dimensions={['orders.product_category']}
    />
  );
}

3. Use the query hook

import { useBonnardQuery } from '@bonnard/react';

function OrderStats() {
  const { data, loading, error } = useBonnardQuery({
    query: {
      measures: ['orders.revenue', 'orders.count'],
      dimensions: ['orders.status'],
    },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data?.map((row, i) => (
        <li key={i}>{row['orders.status']}: ${row['orders.revenue']}</li>
      ))}
    </ul>
  );
}

Charts

All chart components accept data inline or query props:

| Component | Description | |-----------|-------------| | <BarChart> | Vertical or horizontal bar chart | | <LineChart> | Line chart with optional time axis | | <AreaChart> | Stacked or overlapping area chart | | <PieChart> | Pie / donut chart | | <BigValue> | Single KPI number with optional comparison | | <DataTable> | Sortable, paginated data table | | <BonnardChart> | Universal renderer — pass a spec object |

Dashboards

For rendering markdown dashboards in React apps, use the dashboard sub-entry:

import { DashboardViewer } from '@bonnard/react/dashboard';

// Render from markdown content
<DashboardViewer content={markdownString} />

Dashboards are markdown files with YAML query blocks and chart component tags (<BigValue>, <LineChart>, <BarChart>, etc.). See bon docs dashboards for the full format reference.

The dashboard entry adds parser dependencies (gray-matter, remark, rehype). Only import it if you need it — the main entry stays lightweight.

Theming

Dark mode

<BonnardProvider config={{ apiKey: '...' }} darkMode={true}>

Options: true, false, or 'auto' (default — uses prefers-color-scheme).

Custom colors

Override CSS custom properties to match your brand:

:root {
  --bon-bg: #fafafa;
  --bon-text: #1a1a1a;
  --bon-border: #e0e0e0;
  --bon-radius: 12px;
}

Color palettes

<BonnardProvider config={{ apiKey: '...' }} palette="observable">

Built-in palettes: default, tableau, observable, metabase. Or pass a custom array of hex colors.

API

<BonnardProvider>

| Prop | Type | Default | Description | |------|------|---------|-------------| | config | BonnardConfig | — | SDK config (apiKey or fetchToken) | | darkMode | boolean \| 'auto' | 'auto' | Dark mode control | | palette | PaletteName \| string[] | 'tableau' | Chart color palette | | chartHeight | number | 320 | Default chart height in px |

useBonnardQuery(options)

| Option | Type | Description | |--------|------|-------------| | query | QueryOptions | Cube query (measures, dimensions, filters, etc.) | | skip | boolean | Skip execution (for conditional queries) |

Returns { data, loading, error, refetch }.

Links

• Bonnard Docs
• SDK Package
• Discord

License

MIT