@reeflow/react

@reeflow/react

Interfaces

ApiError

Defined in: apps/sdks/core/dist/types.d.ts:49

API error structure Matches the standard NestJS error response format

Properties

Property	Type	Description	Defined in
code?	string	Optional application-specific error code (e.g., ‘VALIDATION_ERROR’)	apps/sdks/core/dist/types.d.ts:57
error?	string	Error type (e.g., ‘Bad Request’, ‘Unauthorized’, ‘Not Found’)	apps/sdks/core/dist/types.d.ts:55
message	string	Human-readable error message	apps/sdks/core/dist/types.d.ts:53
statusCode	number	HTTP status code (e.g., 400, 401, 404, 500)	apps/sdks/core/dist/types.d.ts:51

---

QueryResult

Defined in: packages/types/dist/index.d.mts:20639

Query execution result Shared type for all query results across the Reeflow ecosystem

Properties

Property	Type	Description	Defined in
columns	ColumnInfo[]	Column metadata	packages/types/dist/index.d.mts:20643
compile_time_ms	number	Compilation time in milliseconds (parsing + analysis + validation + transformation)	packages/types/dist/index.d.mts:20649
compiled_sql	string	Compiled SQL query after placeholder replacement and validation	packages/types/dist/index.d.mts:20653
execution_time_ms	number	Execution time in milliseconds	packages/types/dist/index.d.mts:20647
row_count	number	Number of rows returned	packages/types/dist/index.d.mts:20645
rows	unknown[][]	Array of rows, where each row is an array of column values	packages/types/dist/index.d.mts:20641
sql	string	Original SQL query before compilation	packages/types/dist/index.d.mts:20651

---

ReeflowContainerProps

Defined in: apps/sdks/react/src/components/ReeflowContainer.tsx:9

Props for ReeflowContainer

Properties

Property	Type	Description	Defined in
children?	ReactNode	Content to display in the container (any custom content, icons, messages, actions, etc.)	apps/sdks/react/src/components/ReeflowContainer.tsx:13
className?	string	Optional CSS class name	apps/sdks/react/src/components/ReeflowContainer.tsx:15
label?	string	Optional label displayed at the top of the component	apps/sdks/react/src/components/ReeflowContainer.tsx:11
style?	CSSProperties	Optional inline styles	apps/sdks/react/src/components/ReeflowContainer.tsx:17

---

ReeflowEvent

Defined in: apps/sdks/core/dist/types.d.ts:167

Typed Reeflow event

Extends

• CustomEvent

Type Parameters

Type Parameter
T extends ReeflowEventType

Properties

Property	Modifier	Type	Description	Overrides	Defined in
detail	readonly	ReeflowEventDetail[T]	Returns any custom data event was created with. Typically used for synthetic events. MDN Reference	CustomEvent.detail	apps/sdks/core/dist/types.d.ts:169
type	readonly	`reeflow-${T}`	Returns the type of event, e.g. “click”, “hashchange”, or “submit”. MDN Reference	CustomEvent.type	apps/sdks/core/dist/types.d.ts:168

---

ReeflowEventDetail

Defined in: apps/sdks/core/dist/types.d.ts:119

Event detail mapping for type safety

This interface maps each Reeflow event type to its corresponding payload type. All events are prefixed with reeflow- when dispatched (e.g., reeflow-data-loaded).

Example

// Listen to a typed event
element.addEventListener('reeflow-data-loaded', (e: ReeflowEvent<'data-loaded'>) => {
  console.log(e.detail); // Type: QueryResult | EmbeddedWorkbook
});

Properties

Property	Type	Description	Defined in
auth-change	{ authToken: string; }	Provider authentication token changed	apps/sdks/core/dist/types.d.ts:121
auth-change.authToken	string	-	apps/sdks/core/dist/types.d.ts:122
chart-click	ChartClickDetail	User clicked on a chart data point	apps/sdks/core/dist/types.d.ts:153
chart-hover	ChartHoverDetail	User hovered over a chart data point	apps/sdks/core/dist/types.d.ts:155
chart-legend-toggle	ChartLegendToggleDetail	User toggled a chart legend item visibility	apps/sdks/core/dist/types.d.ts:157
data-loaded	| QueryResult | { description?: Record<string, string> | null; name: z.ZodRecord<z.ZodString, z.ZodString>; pages: { columns: number; content: ( | { config: { [key: string]: unknown; columns?: string[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "table"; } | { config: { [key: string]: unknown; dimension?: | { column: string; label?: … | …; type: "categorical"; } | { column: string; date_range?: … | …; granularity: … | … | … | … | …; label?: … | …; type: "time"; }; measures?: { color?: …; column?: …; label?: …; type: …; }[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "bar"; } | { config: { [key: string]: unknown; dimension?: | { column: string; label?: … | …; type: "categorical"; } | { column: string; date_range?: … | …; granularity: … | … | … | … | …; label?: … | …; type: "time"; }; measures?: { color?: …; column?: …; label?: …; type: …; }[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "line"; } | { config: { [key: string]: unknown; label_field?: string; value_field?: string; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "pie"; })[]; description?: Record<string, string> | null; max_rows: number; name: z.ZodRecord<z.ZodString, z.ZodString>; order: number; row_height: number; }[]; theme_css?: string; }	Data was successfully loaded (QueryResult for tables/charts, EmbeddedWorkbook for workbooks)	apps/sdks/core/dist/types.d.ts:134
error	ApiError	An error occurred during component operation	apps/sdks/core/dist/types.d.ts:132
state-change	{ oldState: ReeflowComponentState; state: ReeflowComponentState; }	Component state changed (loading, ready, error, etc.)	apps/sdks/core/dist/types.d.ts:127
state-change.oldState	ReeflowComponentState	-	apps/sdks/core/dist/types.d.ts:129
state-change.state	ReeflowComponentState	-	apps/sdks/core/dist/types.d.ts:128
table-page-change	{ page: number; }	Table page changed (pagination)	apps/sdks/core/dist/types.d.ts:145
table-page-change.page	number	-	apps/sdks/core/dist/types.d.ts:146
table-row-click	{ row: Record<string, unknown> | unknown[]; }	User clicked on a table row	apps/sdks/core/dist/types.d.ts:136
table-row-click.row	Record<string, unknown> | unknown[]	-	apps/sdks/core/dist/types.d.ts:137
table-search-change	{ searchTerm: string; }	Table search term changed	apps/sdks/core/dist/types.d.ts:149
table-search-change.searchTerm	string	-	apps/sdks/core/dist/types.d.ts:150
table-sort-change	{ column: string; direction: "asc" | "desc"; }	Table sorting changed	apps/sdks/core/dist/types.d.ts:140
table-sort-change.column	string	-	apps/sdks/core/dist/types.d.ts:141
table-sort-change.direction	"asc" | "desc"	-	apps/sdks/core/dist/types.d.ts:142
theme-change	ThemeChanged	Theme or theme mode changed	apps/sdks/core/dist/types.d.ts:125
workbook-page-change	{ page: number; previousPage: number; }	Workbook page/tab changed	apps/sdks/core/dist/types.d.ts:159
workbook-page-change.page	number	-	apps/sdks/core/dist/types.d.ts:160
workbook-page-change.previousPage	number	-	apps/sdks/core/dist/types.d.ts:161

---

ReeflowProviderElement

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:11

Provider component that manages authentication context for child Reeflow components Acts as a context provider in the component tree

Fires

reeflow-auth-change - Fired when authentication context changes. Detail: { authToken: string }

Fires

reeflow-theme-change - Fired when theme or theme mode changes. Detail: { theme: string, themeMode: 'light' | 'dark' }

Extends

• ReeflowEventEmitter

Other

authHeader

authHeader: string;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:42

The HTTP header name to use for authentication. Defaults to ‘X-Embed-Authorization’ for embedded user tokens. Use ‘Authorization’ for standard Bearer tokens (e.g., Clerk JWT).

authToken

authToken: string;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:36

baseUrl

baseUrl: any;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:43

debug

debug: boolean;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:44

mock

mock: boolean;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:45

theme

theme: "default" | "ocean";

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:46

themeMode

themeMode: ThemeMode;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:47

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:63

CSS variables for theme customization (passed as inline style string)

Note: This property is named themeStyle instead of style because React has special handling for the style prop (it expects an object and calls .setProperty() on it). Using style directly would conflict with React’s built-in style handling and cause errors.

When this property changes, we sync it to the actual HTML style attribute in the updated() lifecycle method so CSS variables are applied to the element.

Example

<ReeflowProvider themeStyle="--color-primary: #ff0000; --color-secondary: #00ff00" />

sdkId

Get Signature

get protected sdkId(): string | undefined;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:28

SDK identifier for API tracking (e.g., “core”, “react”).

This is intentionally accessed via data attributes (data-sdk-id) rather than Lit properties for the following reasons:

1. Internal use only: SDK info is not meant to be set by end users. Data attributes don’t appear in component API documentation or IDE autocomplete.

2. Per-provider isolation: When a page uses both React and Core SDKs simultaneously, each provider instance can have its own SDK identity. The React SDK wrapper sets data-sdk-id="react" on its provider, while direct Core usage defaults to “core”.

3. Build-time injection: SDK wrappers (like React) can inject these values at build time without exposing them as configurable props to consumers.

Returns

string | undefined

sdkVersion

Get Signature

get protected sdkVersion(): string | undefined;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:34

SDK version for API tracking (semver format: x.y.z).

See sdkId getter for documentation on why this uses data attributes.

Returns

string | undefined

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:38

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowEventEmitter.emitEvent

getApiClient()

getApiClient(): ApiClient;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:84

Get the ApiClient instance for this provider

Returns

ApiClient

getAuthContext()

getAuthContext(): {
  authToken: string;
};

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:92

Get authentication context

Returns

{
  authToken: string;
}

Name	Type	Defined in
authToken	string	apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:93

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:23

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowEventEmitter.log

updateAuth()

updateAuth(authToken, authHeader?): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:98

Update authentication context

Parameters

Parameter	Type
authToken	string
authHeader?	string

Returns

void

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:76

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowEventEmitter.connectedCallback

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:99

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowEventEmitter.render

updates

firstUpdated()

firstUpdated(): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:65

Invoked when the element is first updated. Implement to perform one time work on the element after update.

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns

void

Overrides

ReeflowEventEmitter.firstUpdated

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:66

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Overrides

ReeflowEventEmitter.updated

---

UseReeflowComponentResult

Defined in: apps/sdks/react/src/hooks/useReeflowComponent.ts:15

Return type for useReeflowComponent hook

Properties

Property	Type	Description	Defined in
data	| QueryResult | undefined	Query result data when available	apps/sdks/react/src/hooks/useReeflowComponent.ts:19
error	ApiError | undefined	Error object if an error occurred	apps/sdks/react/src/hooks/useReeflowComponent.ts:21
isEmpty	boolean	Convenience boolean: true when state is ‘empty’	apps/sdks/react/src/hooks/useReeflowComponent.ts:29
isError	boolean	Convenience boolean: true when state is ‘error’	apps/sdks/react/src/hooks/useReeflowComponent.ts:27
isLoading	boolean	Convenience boolean: true when state is ‘loading’	apps/sdks/react/src/hooks/useReeflowComponent.ts:23
isReady	boolean	Convenience boolean: true when state is ‘ready’	apps/sdks/react/src/hooks/useReeflowComponent.ts:25
refresh	() => void	Refresh the component by re-executing the current query	apps/sdks/react/src/hooks/useReeflowComponent.ts:31
reset	(includeQuery?) => void	Reset the component to its initial state	apps/sdks/react/src/hooks/useReeflowComponent.ts:33
state	| ReeflowComponentState | undefined	Current component state	apps/sdks/react/src/hooks/useReeflowComponent.ts:17

Type Aliases

ConnectionConfig

type ConnectionConfig = z.infer<typeof ConnectionConfigSchema>;

Defined in: packages/types/dist/index.d.mts:759

---

DataSourceType

type DataSourceType = typeof DataSourceTypes[number];

Defined in: packages/types/dist/index.d.mts:689

---

ReeflowBarChartProps

type ReeflowBarChartProps = Omit<ReeflowBarChartPropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/ReeflowBarChart.tsx:17

Props for ReeflowBarChart component

All events are automatically available via the generated component:

• Chart events: onChartClick, onChartHover, onChartLegendToggle
• Standard events: onStateChange, onDataLoaded, onError

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the chart (alternative to query)	apps/sdks/react/src/components/ReeflowBarChart.tsx:19
query?	JSONQLQuery	Query to execute to fetch data for the chart	apps/sdks/react/src/components/ReeflowBarChart.tsx:21

---

ReeflowComponentState

type ReeflowComponentState = "initializing" | "loading" | "error" | "ready" | "empty";

Defined in: apps/sdks/core/dist/types.d.ts:8

State type for Reeflow components

---

ReeflowEventType

type ReeflowEventType =
  | "auth-change"
  | "theme-change"
  | "state-change"
  | "error"
  | "data-loaded"
  | "table-row-click"
  | "table-sort-change"
  | "table-page-change"
  | "table-search-change"
  | "chart-click"
  | "chart-hover"
  | "chart-legend-toggle"
  | "workbook-page-change";

Defined in: apps/sdks/core/dist/types.d.ts:62

Reeflow event types

---

ReeflowLineChartProps

type ReeflowLineChartProps = Omit<ReeflowLineChartPropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/ReeflowLineChart.tsx:17

Props for ReeflowLineChart component

All events are automatically available via the generated component:

• Chart events: onChartClick, onChartHover, onChartLegendToggle
• Standard events: onStateChange, onDataLoaded, onError

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the chart (alternative to query)	apps/sdks/react/src/components/ReeflowLineChart.tsx:19
query?	JSONQLQuery	Query to execute to fetch data for the chart	apps/sdks/react/src/components/ReeflowLineChart.tsx:21

---

ReeflowPieChartProps

type ReeflowPieChartProps = Omit<ReeflowPieChartPropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/ReeflowPieChart.tsx:17

Props for ReeflowPieChart component

All events are automatically available via the generated component:

• Chart events: onChartClick, onChartHover, onChartLegendToggle
• Standard events: onStateChange, onDataLoaded, onError

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the chart (alternative to query)	apps/sdks/react/src/components/ReeflowPieChart.tsx:19
query?	JSONQLQuery	Query to execute to fetch data for the chart	apps/sdks/react/src/components/ReeflowPieChart.tsx:21

---

ReeflowProviderProps

type ReeflowProviderProps = Omit<ReeflowProviderPropsGenerated, "sdkId" | "sdkVersion">;

Defined in: apps/sdks/react/src/components/ReeflowProvider.tsx:18

Props for the ReeflowProvider component. Extends the generated props but omits internal SDK tracking fields.

---

ReeflowTableProps

type ReeflowTableProps = Omit<ReeflowTablePropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/ReeflowTable.tsx:17

Props for ReeflowTable component

All events are automatically available via the generated component:

• Table events: onTableRowClick, onTableSortChange, onTablePageChange, onTableSearchChange
• Standard events: onStateChange, onDataLoaded, onError

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the table (alternative to query)	apps/sdks/react/src/components/ReeflowTable.tsx:19
query?	JSONQLQuery	Query to execute to fetch data for the table	apps/sdks/react/src/components/ReeflowTable.tsx:21

---

ReeflowWorkbookProps

type ReeflowWorkbookProps = Omit<ReeflowWorkbookPropsGenerated, "ref">;

Defined in: apps/sdks/react/src/components/ReeflowWorkbook.tsx:13

Props for ReeflowWorkbook component

All events are automatically available via the generated component:

• Workbook events: onDataLoaded, onWorkbookPageChange
• Standard events: onStateChange, onError

Variables

DEFAULT_API_BASE_URL

const DEFAULT_API_BASE_URL: string;

Defined in: apps/sdks/react/src/config.ts:9

Default API base URL Uses VITE_API_HOST environment variable if available, otherwise falls back to production URL

---

DEFAULT_TEST_AUTH_TOKEN

const DEFAULT_TEST_AUTH_TOKEN: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0IiwiaXNzIjoicmVlZmxvdyIsImF1ZCI6ImRhdGEtYXBpIiwiZXhwIjoxNzg5ODQ4MDIzLCJpYXQiOjE3NTgzMzA3NjksImp0aSI6InNlc3NfNmt0QWVnQ0ZTMUc3NjByZUx5WHJOZzVMZmdqIiwib3JnYW5pemF0aW9uX2lkIjoib3JnXzMyTmM1czh4OHBmcnJaWkl2VUtOR2xacFdBZSJ9.ydGlYK7qa0-gMkPGXI5tDwygMeMRmYkQWIDeXONQOFo" = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0IiwiaXNzIjoicmVlZmxvdyIsImF1ZCI6ImRhdGEtYXBpIiwiZXhwIjoxNzg5ODQ4MDIzLCJpYXQiOjE3NTgzMzA3NjksImp0aSI6InNlc3NfNmt0QWVnQ0ZTMUc3NjByZUx5WHJOZzVMZmdqIiwib3JnYW5pemF0aW9uX2lkIjoib3JnXzMyTmM1czh4OHBmcnJaWkl2VUtOR2xacFdBZSJ9.ydGlYK7qa0-gMkPGXI5tDwygMeMRmYkQWIDeXONQOFo';

Defined in: apps/sdks/react/src/config.ts:19

Default test auth token for development and testing This is a valid JWT token for testing with the Reeflow API Uses organization_id ‘demo-org’ matching the SPA demo environment

---

DEFAULT_THEME

const DEFAULT_THEME: "default" = 'default';

Defined in: apps/sdks/react/src/config.ts:25

Default theme for Reeflow components

---

DEFAULT_THEME_MODE

const DEFAULT_THEME_MODE: "auto" = 'auto';

Defined in: apps/sdks/react/src/config.ts:30

Default theme mode for Reeflow components

---

DEFAULT_USE_MOCK

const DEFAULT_USE_MOCK: boolean;

Defined in: apps/sdks/react/src/config.ts:11

---

ReeflowProvider

const ReeflowProvider: ForwardRefExoticComponent<Omit<ReeflowProviderProps, "ref"> & RefAttributes<ReeflowProviderElement>>;

Defined in: apps/sdks/react/src/components/ReeflowProvider.tsx:96

ReeflowProvider component wrapper that sets SDK tracking data attributes.

Uses forwardRef to allow consumers to access provider methods like getApiClient() and updateAuth().

---

ReeflowWorkbook

const ReeflowWorkbook: ForwardRefExoticComponent<ReeflowWorkbookProps> = ReeflowWorkbookGenerated;

Defined in: apps/sdks/react/src/components/ReeflowWorkbook.tsx:32

ReeflowWorkbook component with React event handlers

Example

Using React event handlers:

<ReeflowWorkbook
  workbookId="workbook-123"
  theme="ocean"
  themeMode="light"
  onDataLoaded={(workbook) => console.log('Workbook loaded:', workbook)}
  onWorkbookPageChange={({ page, previousPage }) => console.log('Page changed:', page, previousPage)}
  onStateChange={(state) => console.log('State:', state)}
  onError={(error) => console.error('Error:', error.message)}
/>

---

version

const version: "0.0.1" = '0.0.1';

Defined in: apps/sdks/react/src/index.ts:27

Functions

ReeflowBarChart()

function ReeflowBarChart(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/ReeflowBarChart.tsx:40

ReeflowBarChart component with React event handlers

Parameters

Parameter	Type
__namedParameters	ReeflowBarChartProps

Returns

Element

Example

Using React event handlers:

<ReeflowBarChart
  label="Component Title"
  query={query}
  onStateChange={(state) => console.log('State:', state)}
  onDataLoaded={(data) => console.log('Data loaded:', data.row_count, 'rows')}
  onError={(error) => console.error('Error:', error.message)}
  onChartClick={(detail) => console.log('Clicked bar:', detail.name, detail.value)}
/>

---

ReeflowContainer()

function ReeflowContainer(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/ReeflowContainer.tsx:44

Parameters

Parameter	Type
__namedParameters	ReeflowContainerProps

Returns

Element

---

ReeflowLineChart()

function ReeflowLineChart(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/ReeflowLineChart.tsx:40

ReeflowLineChart component with React event handlers

Parameters

Parameter	Type
__namedParameters	ReeflowLineChartProps

Returns

Element

Example

Using React event handlers:

<ReeflowLineChart
  label="Component Title"
  query={query}
  onStateChange={(state) => console.log('State:', state)}
  onDataLoaded={(data) => console.log('Data loaded:', data.row_count, 'rows')}
  onError={(error) => console.error('Error:', error.message)}
  onChartClick={(detail) => console.log('Clicked:', detail.name, detail.value)}
/>

---

ReeflowPieChart()

function ReeflowPieChart(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/ReeflowPieChart.tsx:40

ReeflowPieChart component with React event handlers

Parameters

Parameter	Type
__namedParameters	ReeflowPieChartProps

Returns

Element

Example

Using React event handlers:

<ReeflowPieChart
  label="Component Title"
  query={query}
  onStateChange={(state) => console.log('State:', state)}
  onDataLoaded={(data) => console.log('Data loaded:', data.row_count, 'rows')}
  onError={(error) => console.error('Error:', error.message)}
  onChartClick={(detail) => console.log('Clicked slice:', detail.name, detail.value)}
/>

---

ReeflowTable()

function ReeflowTable(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/ReeflowTable.tsx:43

ReeflowTable component with React event handlers

Parameters

Parameter	Type
__namedParameters	ReeflowTableProps

Returns

Element

Example

Using React event handlers:

<ReeflowTable
  label="Component Title"
  query={query}
  onStateChange={(state) => console.log('State:', state)}
  onDataLoaded={(data) => console.log('Data loaded:', data.row_count, 'rows')}
  onError={(error) => console.error('Error:', error.message)}
  onTableRowClick={(detail) => console.log('Row clicked:', detail)}
  onTableSortChange={(detail) => console.log('Sort changed:', detail.column, detail.direction)}
  onTablePageChange={(detail) => console.log('Page changed:', detail)}
  onTableSearchChange={(detail) => console.log('Search:', detail)}
/>

---

useReeflowComponent()

function useReeflowComponent(componentId): UseReeflowComponentResult;

Defined in: apps/sdks/react/src/hooks/useReeflowComponent.ts:102

Hook to access a Reeflow component’s state, data, and control methods

This hook provides a React-friendly way to access and control Reeflow components without manually managing refs or event listeners.

Parameters

Parameter	Type	Description
componentId	string	The unique ID of the Reeflow component (must match the component’s id prop)

Returns

UseReeflowComponentResult

Object containing state, data, error, convenience booleans, and control methods

Examples

Basic usage with loading and error states

function SalesChart() {
  const { data, isLoading, isError, error } = useReeflowComponent('sales-chart');

  return (
    <div>
      {isLoading && <Spinner />}
      {isError && <ErrorMessage error={error} />}
      {data && <p>Loaded {data.row_count} rows</p>}

      <ReeflowBarChart id="sales-chart" query={query} />
    </div>
  );
}

Using refresh and reset methods

function InteractiveChart() {
  const { data, refresh, reset } = useReeflowComponent('chart');

  return (
    <div>
      <button onClick={refresh}>Refresh Data</button>
      <button onClick={() => reset(true)}>Reset Query</button>

      <ReeflowBarChart id="chart" query={query} />
    </div>
  );
}

Dashboard with multiple components

function Dashboard() {
  const revenue = useReeflowComponent('revenue-chart');
  const orders = useReeflowComponent('orders-chart');

  const isLoading = revenue.isLoading || orders.isLoading;
  const hasErrors = revenue.isError || orders.isError;

  return (
    <div>
      {isLoading && <p>Loading dashboard...</p>}
      {hasErrors && <p>Some charts failed to load</p>}

      <ReeflowBarChart id="revenue-chart" query={revenueQuery} />
      <ReeflowLineChart id="orders-chart" query={ordersQuery} />
    </div>
  );
}