Vizel API / react/src / useVizelState

Function: useVizelState()

function useVizelState(editor): number;

Defined in: packages/react/src/hooks/useVizelState.ts:33

Hook that forces a re-render whenever the editor's state changes.

This is useful for components that need to reflect the current editor state (e.g., formatting buttons that show active state). Backed by useSyncExternalStore plus createVizelEditorTransactionStore from @vizel/core so the subscription and version tracking are shared with the Vue and Svelte adapters.

Parameters

Parameter	Type	Description
editor	Editor | null | undefined	The editor instance (or null while it is still initializing)

Returns

number

A monotonically increasing transaction tick (typically ignored)

Example

function FormattingButtons({ editor }: { editor: Editor }) {
  useVizelState(editor);
  return (
    <button className={editor.isActive("bold") ? "active" : ""}>
      Bold
    </button>
  );
}