useImageExport()

Export the paper in context

function useImageExport(options?): ImageExportResult;

Exports the paper as a PNG, JPEG, WebP, or SVG image, with optional one-click download. Reach for it to wire up an "Export" or "Download" button without juggling the export lifecycle yourself.

Returns an ImageExportResult [exportImage, state] tuple:

• exportImage(triggerOptions?) runs the export. It resolves to the image data: URL (or the raw <svg> markup when the SVG variant is created with raw: true) and rejects with an Error when export fails. Pass { downloadAs: 'diagram' } to also save the file to disk.
• state is a discriminated union (idle / loading / success / error) describing the latest attempt — handy for disabling the button and showing progress.

The output format is locked in when the hook is created, so call the hook once per format you want to offer. Exports use crisp defaults (useComputedStyles: 'full', embedFonts: true); raster output is also scaled to the device pixel ratio (e.g. '2x' on a retina screen) for sharp HiDPI images, unless you pin the output yourself with size or with explicit width + height.

This overload resolves the paper from the surrounding <Paper> context, or the single mounted paper. exportImage throws when no paper is found.

Parameters

Parameter	Type	Description
options?	ImageExportOptions	Output format plus the export options forwarded to the underlying JointJS format helper. See ImageExportOptions.

Returns

ImageExportResult

The ImageExportResult tuple — the export trigger and the current ImageExportState.

Example

import { useImageExport } from '@joint/react-plus';

// Render this inside a <Paper> subtree.
function ExportButton() {
  const [exportImage, state] = useImageExport({ type: 'image/png' });
  return (
    <button
      disabled={state.isLoading}
      onClick={() => exportImage({ downloadAs: 'diagram' })}
    >
      {state.isLoading ? 'Exporting…' : 'Export PNG'}
    </button>
  );
}

Export a specific paper

function useImageExport(paperTarget, options?): ImageExportResult;

Exports a specific paper as a PNG, JPEG, WebP, or SVG image. Use this form when several papers are mounted and you need to target one explicitly.

Otherwise identical to the context form: it returns the same [exportImage, state] tuple and honours the same options and defaults.

Parameters

Parameter	Type	Description
paperTarget	PaperTarget	Which paper to export: its id, a dia.Paper instance, or a RefObject<dia.Paper>.
options?	ImageExportOptions	Output format plus the export options forwarded to the underlying JointJS format helper. See ImageExportOptions.

Returns

ImageExportResult

The ImageExportResult tuple — the export trigger and the current ImageExportState.

Example

import { useImageExport } from '@joint/react-plus';

// Target a specific paper by id when several papers are mounted.
function ExportSvgButton() {
  const [exportImage] = useImageExport('main-paper', { type: 'image/svg+xml' });
  return (
    <button onClick={() => exportImage({ downloadAs: 'chart' })}>
      Export SVG
    </button>
  );
}