Fabric.js React hooks

These Fabric.js React hooks live in fabricjs-document-engine/react. The entry is marked 'use client', and React is an optional peer dependency: the core never imports it. React 18 and 19 are supported.

import {
  DocumentEngineProvider,
  useDocumentEngine,
  useDocumentEvent,
  useDocumentState,
  useEngine,
} from "fabricjs-document-engine/react";

useDocumentEngine

function useDocumentEngine(canvas: StaticCanvas | null | undefined, options?: ReactEngineOptions): DocumentEngine | null

Creates the engine once canvas exists and destroys it on unmount. Returns null until then. Options are read when the engine is created.

The options are the same as createDocumentEngine, without canvas.

useDocumentState

function useDocumentState(engine: DocumentEngine | null | undefined): DocumentState | null

Returns DocumentState, or null without an engine, and re-renders when any of it changes.

Name	Type	Default	Description
documentId*	string	—	The current document id.
isLoading*	boolean	—	Whether a load is running.
loadError*	DocumentEngineError \| undefined	—	The error of the last failed load.
saveStatus*	SaveStatus	—	`saved`, `unsaved`, `saving`, `error` or `conflict`.
isDirty*	boolean	—	Whether there are unsaved changes.
isSaving*	boolean	—	Whether a save is running.
revision*	number	—	The revision last saved or loaded.
lastSavedAt*	string \| undefined	—	When the last save finished.
saveError*	DocumentEngineError \| undefined	—	The error of the last failed save.
canUndo*	boolean	—	Whether there is a step to undo.
canRedo*	boolean	—	Whether there is a step to redo.
undoLabel*	string \| undefined	—	The label of the next undo step.
redoLabel*	string \| undefined	—	The label of the next redo step.
assetWarnings*	AssetWarning[]	—	Warnings from the last load, such as a font that fell back.

useDocumentEvent

function useDocumentEvent<Name extends keyof DocumentEngineEvents>(engine: DocumentEngine | null | undefined, name: Name, handler: (payload: DocumentEngineEvents[Name]) => void): void

Subscribes to an engine event, always calling the latest handler.

The event names and payloads are listed in events.

DocumentEngineProvider and useEngine

function DocumentEngineProvider({ engine, children }: DocumentEngineProviderProps): ReactNode

Passes the engine down to deeply nested toolbars.

function useEngine(): DocumentEngine | null

Reads the engine from the nearest DocumentEngineProvider.

Name	Type	Default	Description
engine*	DocumentEngine \| null	—	The engine from `useDocumentEngine`.
children	ReactNode	—	Your editor UI.

A complete example of these Fabric.js React hooks working together is in the React guide. For other frameworks, createDocumentStateStore returns the same DocumentState without React.