Fabric.js React hooks

这些 Fabric.js React hooks 位于 fabricjs-document-engine/react。这个入口标记了 'use client'，React 是可选的 peer 依赖：核心代码从不导入它。支持 React 18 和 19。

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.

配置项和 createDocumentEngine 相同，只是没有 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.

事件名和数据列在事件里。

DocumentEngineProvider 和 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.

这些 Fabric.js React hooks 组合使用的完整示例见 React 指南。其他框架可以用 createDocumentStateStore，不依赖 React 也能拿到同样的 DocumentState。