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