# React hooks

> Reference for the Fabric.js React hooks: useDocumentEngine, useDocumentState, useDocumentEvent, useEngine and DocumentEngineProvider, with signatures.

Source: https://fabricjs-document-engine.jscrate.dev/docs/api/react-hooks
Last updated: 2026-09-28

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.

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

## useDocumentEngine

```ts
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`](https://fabricjs-document-engine.jscrate.dev/docs/api/create-document-engine), without `canvas`.

## useDocumentState

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

## useDocumentEvent

```ts
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](https://fabricjs-document-engine.jscrate.dev/docs/api/events).

## DocumentEngineProvider and useEngine

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

Passes the engine down to deeply nested toolbars.

```ts
function useEngine(): DocumentEngine | null
```

Reads the engine from the nearest `DocumentEngineProvider`.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `engine` (required) | `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](https://fabricjs-document-engine.jscrate.dev/docs/frameworks/react). For other frameworks, [`createDocumentStateStore`](https://fabricjs-document-engine.jscrate.dev/docs/api/helpers) returns the same `DocumentState` without React.