KeepTogether

Wraps content that should not be split across pages. If the wrapped content doesn’t fit on the current page, it all moves to the next page.

React

import { KeepTogether } from "@press-js/react";

<KeepTogether>
  <h3>Q4 Revenue Chart</h3>
  <ChartComponent />
  <p className="caption">This chart and its caption stay on the same page.</p>
</KeepTogether>;

Vue

<script setup lang="ts">
  import { KeepTogether } from "@press-js/vue";
</script>

<template>
  <KeepTogether>
    <h3>Q4 Revenue Chart</h3>
    <ChartComponent />
    <p class="caption">This chart and its caption stay on the same page.</p>
  </KeepTogether>
</template>

Props

Both className and style are supported.

Native HTML API

The component renders a <div data-press-keep-together>. This attribute is Press.js’s native way to prevent page breaks inside an element — no CSS needed:

<div data-press-keep-together>
  <h3>Q4 Revenue Chart</h3>
  <div class="chart"><!-- chart markup --></div>
  <p class="caption">This chart and its caption stay on the same page.</p>
</div>

Any element with data-press-keep-together is treated as an unbreakable block by the pagination engine.

When to use

• A heading followed by a short paragraph that should not be orphaned
• A chart or figure with its caption
• A group of related table rows
• Any logical unit that loses meaning when split

Caveats

• If the content inside <KeepTogether> is taller than one full page, it will overflow. The pagination engine flags this as an oversized fragment. Ensure wrapped content fits within the page content area.
• Avoid nesting <KeepTogether> inside other <KeepTogether> elements — it can make the pagination planner’s job harder and may lead to unexpected overflow.
• Use <KeepTogether> sparingly on critical content only. Overusing it can lead to large gaps at the bottom of pages.