getReactiveState

Returns reactive refs for each state field. Subscribe to a ref to re-render when its value changes - useful inside custom toolbar items and other child components.

Usage

getReactiveState(): TState<State>;

State fields:

Field	Type	Description
currentDate	Date	Pivot date that determines the visible range
currentView	string	Active view id
rangeLabel	string	Display label for the current date range
visibleDateRange	{ start: Date; end: Date }	Start/end of the visible range
events	EventsStore	Internal event storage
viewData	any	View-model render data for the active view
filters	Map<string, (obj: any) => boolean>	Active filter predicates keyed by tag
editorData	CalendarEvent | null	Currently selected event, or null

Example

import { useRef, useEffect } from "react";
import { Calendar } from "@svar-ui/react-calendar";

function App() {
  const apiRef = useRef(null);

  const onInit = (obj) => {
    apiRef.current = obj;
    const { rangeLabel } = obj.getReactiveState();
    rangeLabel.subscribe(label => console.log("range:", label));
  };

  return <Calendar events={events} date={date} onInit={onInit} />;
}

export default App;

Related articles

• getState — non-reactive snapshot of the same fields.
• getStores — direct access to the underlying store instance.
• exec — dispatch actions that mutate state.
• Navigation bar — typical consumer of reactive state inside custom toolbar items.