# React PDF Generator Hook - @spexzee/react-pdfhook
A production-ready React hook for generating high-fidelity PDFs with advanced layout control and content targeting.
Main Issue solved : if data doesn't fit in a remaining screen it will start from next page
## Features
- **Precision PDF Generation**
- Convert React components to pixel-perfect PDFs
- Support for all HTML/CSS that html2canvas can render
- Automatic and manual page break controls
- **Advanced Content Targeting**
- Flexible selector system for specific elements
- PDF-only content visibility (show in PDF but hide in browser)
- Image handling with CORS support
- **Layout Control**
- Fixed-width mode for consistent cross-device rendering
- Responsive design preservation
- Customizable margins and page formats
## Installation
```bash
npm install @spexzee/react-pdfhook
# or
yarn add @spexzee/react-pdfhook
```
## Basic Usage
```jsx
import { usePdfGenerator } from '@spexzee/react-pdfhook';
import Image from './images/header.jpg'
function DocumentGenerator() {
const { generatePdf, pdfRef } = usePdfGenerator({
fileName: 'document.pdf'
});
const handleDownload = async () => {
// manually add which elements we wants in pdf
await generatePdf([
{
selector: Image.src,
mapping: false,
type: 'image',
imageOptions: {
width: 180, // mm
maintainAspectRatio: true
}
},
{
selector: '.header-content',
mapping: false,
type: 'element'
},
{
selector: '.multi-data',
// advantage of using mapping , it will single single data into pdf , so we can easilt manage page-breaks ,
// if data doesn't fit in a remaining screen it will start from next page
mapping: true,
type: 'element'
}
]);
};
return (
My Document
This content will appear in the PDF
{
data.map((x)=>(
))
}
);
}
```
# Normal Function example
## Component Implementation
```tsx
import React, { useRef } from 'react';
import { usePdfGenerator } from '@spexzee/react-pdfhook';
const SimplePdfExport = () => {
const { exportToPdf, pdfRef, pdfLoading } = usePdfGenerator({
fileName: 'my-document',
});
return (
{/* This div's contents will be converted to PDF */}
Document Title
Section 1
This content will be processed (parent element)
Nested content 1 (child element)
Nested content 2 (child element)
This footer has no children and will be processed directly