Container Component

The <reeflow-container> component provides a generic container that renders custom content within the standard Reeflow frame structure. It’s perfect for displaying custom UI elements, empty states, placeholders, or any other content that needs consistent Reeflow styling and theme support.

Basic usage

React

import { ReeflowProvider, ReeflowContainer } from '@reeflow/react';

<ReeflowProvider authToken="your-token">
  <ReeflowContainer title="Custom Content">
    <div style={{ textAlign: 'center', padding: '40px' }}>
      <p>Your custom content goes here</p>
    </div>
  </ReeflowContainer>
</ReeflowProvider>;

Vanilla JS / HTML

<reeflow-provider auth-token="your-token">
  <reeflow-container title="Custom Content">
    <div style="text-align: center; padding: 40px;">
      <p>Your custom content goes here</p>
    </div>
  </reeflow-container>
</reeflow-provider>

Attributes

title (optional)

Optional title displayed at the top of the container:

<reeflow-container title="Analytics Dashboard"></reeflow-container>

theme (optional)

Override the theme inherited from the Provider:

<reeflow-container
  title="Custom Content"
  theme="ocean">
</reeflow-container>

theme-mode (optional)

Override the theme mode (light/dark/auto):

<reeflow-container
  title="Custom Content"
  theme-mode="dark">
</reeflow-container>

Use cases

Empty states

Display user-friendly messages when no data is available:

React

import { ReeflowContainer } from '@reeflow/react';

<ReeflowContainer title="No Data Available">
  <div style={{ textAlign: 'center', padding: '60px 20px' }}>
    <h3>No results found</h3>
    <p>Try adjusting your filters or search criteria</p>
  </div>
</ReeflowContainer>;

Vanilla JS / HTML

<reeflow-container title="No Data Available">
  <div style="text-align: center; padding: 60px 20px;">
    <h3>No results found</h3>
    <p>Try adjusting your filters or search criteria</p>
  </div>
</reeflow-container>

Custom dashboards

Combine containers with other Reeflow components for custom dashboard layouts:

React

import { ReeflowProvider, ReeflowContainer, ReeflowBarChart } from '@reeflow/react';

<ReeflowProvider authToken="your-token">
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
    <ReeflowBarChart title="Sales Data" query={salesQuery} />

    <ReeflowContainer title="Quick Stats">
      <div style={{ padding: '20px' }}>
        <div>Total Revenue: $125,450</div>
        <div>Orders: 1,234</div>
        <div>Customers: 567</div>
      </div>
    </ReeflowContainer>
  </div>
</ReeflowProvider>;

Vanilla JS / HTML

<reeflow-provider auth-token="your-token">
  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
    <reeflow-bar-chart title="Sales Data">
      <script type="application/json" slot="query">
        { "from": "sales", "dimensions": ["region"], "measures": [{"column": "revenue", "type": "sum"}] }
      </script>
    </reeflow-bar-chart>

    <reeflow-container title="Quick Stats">
      <div style="padding: 20px;">
        <div>Total Revenue: $125,450</div>
        <div>Orders: 1,234</div>
        <div>Customers: 567</div>
      </div>
    </reeflow-container>
  </div>
</reeflow-provider>

Loading states

Create custom loading indicators:

React

import { ReeflowContainer } from '@reeflow/react';

<ReeflowContainer title="Loading Data">
  <div style={{ display: 'flex', justifyContent: 'center', padding: '80px' }}>
    <div className="spinner">Loading...</div>
  </div>
</ReeflowContainer>;

Vanilla JS / HTML

<reeflow-container title="Loading Data">
  <div style="display: flex; justify-content: center; padding: 80px;">
    <div class="spinner">Loading...</div>
  </div>
</reeflow-container>

Action panels

Display forms, buttons, or other interactive elements:

React

import { ReeflowContainer } from '@reeflow/react';

<ReeflowContainer title="Export Data">
  <div style={{ padding: '20px' }}>
    <p>Download your data in various formats:</p>
    <div style={{ display: 'flex', gap: '10px', marginTop: '16px' }}>
      <button onClick={() => exportCSV()}>Export as CSV</button>
      <button onClick={() => exportJSON()}>Export as JSON</button>
      <button onClick={() => exportPDF()}>Export as PDF</button>
    </div>
  </div>
</ReeflowContainer>;

Vanilla JS / HTML

<reeflow-container title="Export Data">
  <div style="padding: 20px;">
    <p>Download your data in various formats:</p>
    <div style="display: flex; gap: 10px; margin-top: 16px;">
      <button onclick="exportCSV()">Export as CSV</button>
      <button onclick="exportJSON()">Export as JSON</button>
      <button onclick="exportPDF()">Export as PDF</button>
    </div>
  </div>
</reeflow-container>

Styling

The Container component provides the standard two-layer padding structure (frame + container) with optional title, border, margin, and padding. It automatically inherits theming from the Provider and supports both light and dark modes.

Custom CSS

You can apply custom styles using CSS Parts or inline styles:

/* Target the container element */
reeflow-container::part(container) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Target the title */
reeflow-container::part(title) {
  color: #1a1a1a;
  font-size: 24px;
  font-weight: 700;
}

See the Theming documentation for more customization options.

TypeScript support

The container component is fully typed when using TypeScript:

import type { ReeflowContainer } from '@reeflow/core';

const container = document.querySelector('reeflow-container') as ReeflowContainer;

// Typed properties
container.title = 'New Title';
container.theme = 'ocean';
container.themeMode = 'dark';

For complete type definitions, see the SDK Reference.