<PageBreaks />

Draws a dashed grid on the paper that marks where fixed-size print pages would split, so you can preview how a diagram maps onto sheets of paper. Lines are placed at every width/height step out from (x, y) across the visible area; lines that fall exactly on the edges of the visible area are skipped.

The default spacing is A4 portrait at 72 DPI — the same default page size as PaperScroller in sheets mode — so the breaks line up with the scroller's pages out of the box. Mount it inside a <Paper>.

Example

import { GraphProvider, PaperScroller, Paper, PageBreaks } from '@joint/react-plus';

// Dashed lines every 595×842 units (A4 @ 72 DPI).
<GraphProvider>
  <PaperScroller mode="sheets">
    <Paper>
      <PageBreaks />
    </Paper>
  </PaperScroller>
</GraphProvider>

Props

height?

readonly optional height?: number;

Vertical spacing between horizontal break lines, in local (graph) coordinates. Defaults to A4 portrait height at 72 DPI, matching the default page height of <PaperScroller mode="sheets">.

Default

842

---

style?

readonly optional style?: CSSProperties;

Inline CSS applied to the underlying SVG <path> that draws the lines.

Default

{}

---

width?

readonly optional width?: number;

Horizontal spacing between vertical break lines, in local (graph) coordinates. Defaults to A4 portrait width at 72 DPI, matching the default page width of <PaperScroller mode="sheets">.

Default

595

---

x?

readonly optional x?: number;

X coordinate the line grid is anchored at, in local (graph) coordinates.

Default

0

---

y?

readonly optional y?: number;

Y coordinate the line grid is anchored at, in local (graph) coordinates.

Default

0