getReactiveState
Returns reactive stores for each field of the Kanban state. Subscribing to an individual store re-runs dependent logic whenever that field changes. Unlike getState(), which returns a one-time snapshot.
Usage
getReactiveState(): TState<State>
The returned object contains a reactive store for each state field:
| Field | Type | Description |
|---|---|---|
cards | CardsStore | Internal card storage |
columns | ColumnConfig[] | Column definitions in board order |
columnAccessor | ColumnAccessor | Resolver for card-to-column membership |
filters | Map<string, FilterPredicate> | Active filter predicates keyed by tag |
sort | SortCriterion | Active sort criterion, or null |
editorData | KanbanCard | null | Currently selected card, or null |
dynamicData | boolean | Whether dynamic loading is on |
columnData | Map<ColumnID, { status: ColumnDataStatus }> | Per-column load state ("unknown", "loading", or "loaded") |
history | { undo: number; redo: number } | Available undo/redo step counts |
viewData | KanbanModel | Projected render model (ordered, filtered, sorted columns) |
Each store is a reactive value. Reading it inside a reactive context (useMemo, useEffect) sets up automatic tracking.
Example
import { useState, useMemo } from "react";
import { Kanban } from "@svar-ui/react-kanban";
function App() {
const [api, setApi] = useState(null);
function init(kanbanApi) {
setApi(kanbanApi);
}
const state = useMemo(() => api?.getReactiveState(), [api]);
const cards = useMemo(() => state?.cards.v, [state]);
return (
<>
<Kanban init={init} cards={cards} columns={columns} />
<p>Total cards: {cards?.length ?? 0}</p>
</>
);
}