useRegion()

function useRegion(paperTarget?): RegionApi;

Draws interactive regions on a paper on demand — no <Selection> or <Diagram> required, just a resolvable Paper. Each method lets the user sweep out a region and resolves to its raw geometry; no cells are selected. Reach for it to capture an area for image export, hit-testing, or custom tools.

Unlike useSelection (which requires <Diagram> and reflects a mounted <Selection> configuration), this hook builds a throwaway region per call, configured solely by the options you pass.

Every method no-ops (resolves to null) until a paper is resolved, and resolves to null when the user cancels the draw.

Parameters

Parameter	Type	Description
paperTarget?	PaperTarget	Which paper to draw on: a paper id, a dia.Paper ref, a dia.Paper instance, or undefined to use the nearest <Paper> in context.

Returns

The region-drawing handle, RegionApi.

startPolygonRegion

readonly startPolygonRegion: (options?) => Promise<Polygon | null>;

Draw an interactive polygon and resolve to its g.Polygon (or null if cancelled).

Parameters

Parameter	Type
options?	StartPolygonRegionOptions

Returns

Promise<Polygon | null>

---

startRangeRegion

readonly startRangeRegion: (options?) => Promise<Range | null>;

Draw an interactive 1D range and resolve to its [start, end] span (or null if cancelled).

Parameters

Parameter	Type
options?	StartRangeRegionOptions

Returns

Promise<Range | null>

---

startRectangleRegion

readonly startRectangleRegion: (options?) => Promise<Rect | null>;

Draw an interactive rectangle and resolve to its g.Rect (or null if cancelled).

Parameters

Parameter	Type
options?	StartRectangleRegionOptions

Returns

Promise<Rect | null>

See

• SelectionRegion
• selection-region

Example

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

// Mount this inside a <Paper> so the hook can resolve it from context.
function ExportAreaButton() {
  const { startRectangleRegion } = useRegion();

  async function handleSelectArea() {
    const rect = await startRectangleRegion(); // user drags out an area
    if (rect) console.log('selected area', rect.toJSON()); // rect is a g.Rect
  }

  return <button onClick={handleSelectArea}>Select export area</button>;
}