Vizel API / react/src / useVizelEditorState

Function: useVizelEditorState()

function useVizelEditorState<T>(selector, options?): T;

Defined in: packages/react/src/_reactivity.ts:224

Subscribe to a slice of the editor's state.

The hook reads the editor instance from the surrounding VizelProvider (or returns null while no provider is mounted, mirroring useVizelContextSafe). Pass options.editor to subscribe to an explicit instance instead — a component that receives the editor as a prop uses it so the selector still tracks state when no provider wraps the component. The hook then wraps a per-editor store inside useSyncExternalStore so React re-runs the selector on every transaction. The hook short-circuits via the supplied equalityFn (defaulting to Object.is), preventing re-renders when the slice is structurally unchanged.

Tearing-safety under React 19 concurrent rendering is the load-bearing reason for useSyncExternalStore here: React routes every snapshot read through the official store contract, so two concurrently scheduled trees never observe inconsistent editor state.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
selector	(snapshot) => T
options?	UseVizelEditorStateOptions<T>

Returns

T

Examples

const isBold = useVizelEditorState(({ editor }) => editor?.isActive("bold") ?? false);

const marks = useVizelEditorState(
  ({ editor }) => ({
    bold: editor?.isActive("bold") ?? false,
    italic: editor?.isActive("italic") ?? false,
  }),
  { equalityFn: shallowEqualObject },
);