ChunkA4

A React library for dynamically splitting HTML content into A4-sized pages for printing.

Features

• Real-time pagination of dynamic HTML content
• A4 page sizing with customizable margins
• Print-optimized layout with proper page breaks
• Optional print button with customizable styling
• Minimal dependencies and lightweight footprint

Installation

npm install chunka4
# or
yarn add chunka4

Basic Usage

import React from 'react';
import { A4PageBreaker } from 'chunka4';

const MyComponent = () => {
  const htmlContent = `
    <h1>My Document</h1>
    <p>This content will be dynamically split into A4-sized pages.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <p>More content...</p>
  `;

  return (
    <div>
      <h2>Document Preview</h2>
      <A4PageBreaker content={htmlContent} />
    </div>
  );
};

export default MyComponent;

Components

A4PageBreaker

The main component that splits HTML content into A4-sized pages.

Props

Prop	Type	Default	Description
content	string	(required)	HTML content to be paginated
pageStyle	React.CSSProperties	{}	Custom styling for the page containers
showMargins	boolean	true	Whether to show standard A4 margins (20mm)
onPagesGenerated	(count: number) => void	undefined	Callback when pages are generated
showPrintButton	boolean	true	Whether to show the built-in print button
printButtonText	string	"Print"	Text for the print button
printButtonStyle	React.CSSProperties	undefined	Custom styling for the print button

PrintButton

A standalone print button component that can be used independently.

Props

Prop	Type	Default	Description
text	string	"Print"	Button text
style	React.CSSProperties	{}	Custom styling for the button
className	string	undefined	Additional CSS class name
onBeforePrint	() => void	undefined	Callback before print dialog opens
onAfterPrint	() => void	undefined	Callback after print dialog is initiated

Examples

With Custom Styling

import React from 'react';
import { A4PageBreaker } from 'chunka4';

const StyledDocument = () => {
  const htmlContent = `
    <h1 style="color: #2196F3;">Styled Document</h1>
    <p>This content has custom styling.</p>
  `;

  return (
    <A4PageBreaker 
      content={htmlContent}
      pageStyle={{ 
        border: '2px solid #2196F3',
        borderRadius: '8px' 
      }}
      printButtonText="Print Document"
      printButtonStyle={{ 
        backgroundColor: '#2196F3',
        borderRadius: '8px'
      }}
    />
  );
};

Using Separate Print Button

import React from 'react';
import { A4PageBreaker, PrintButton } from 'chunka4';

const DocumentWithCustomPrint = () => {
  const htmlContent = `<h1>My Document</h1><p>Content...</p>`;
  
  return (
    <div>
      <A4PageBreaker 
        content={htmlContent}
        showPrintButton={false} 
      />
      
      <div className="button-container">
        <PrintButton 
          text="Print Document" 
          style={{ backgroundColor: '#4CAF50' }}
          onBeforePrint={() => console.log('Print started')}
        />
        <button onClick={() => window.close()}>Close</button>
      </div>
    </div>
  );
};

Page Counting

import React, { useState } from 'react';
import { A4PageBreaker } from 'chunka4';

const DocumentWithPageCount = () => {
  const [pageCount, setPageCount] = useState(0);
  const htmlContent = `<h1>My Document</h1><p>Content...</p>`;
  
  return (
    <div>
      <p>Total pages: {pageCount}</p>
      
      <A4PageBreaker 
        content={htmlContent}
        onPagesGenerated={setPageCount}
      />
    </div>
  );
};

License

MIT