Custom Styling Examples
This guide demonstrates various ways to style your PDF documents using EasyPdf.
Basic Styling
tsx
import { EasyPdf, useEasyPdf } from "@easypdf/react";
const BasicStyling = () => {
const { pdfRef, downloadPDF } = useEasyPdf();
return (
<div>
<EasyPdf ref={pdfRef}>
{/* Using Tailwind CSS classes */}
<div className="max-w-3xl mx-auto p-8">
<h1 className="text-4xl font-bold text-blue-600 mb-6">
Styled Document
</h1>
<p className="text-gray-700 text-lg mb-4">
This document demonstrates basic styling capabilities.
</p>
<div className="bg-gray-50 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-semibold text-gray-800 mb-4">
Section Title
</h2>
<p className="text-gray-600">
Content with custom styling and formatting.
</p>
</div>
</div>
</EasyPdf>
<button
onClick={() => downloadPDF("styled-document.pdf")}
className="bg-blue-500 text-white px-4 py-2 rounded"
>
Download PDF
</button>
</div>
);
};Advanced Layout
tsx
const AdvancedLayout = () => {
const { pdfRef, downloadPDF } = useEasyPdf();
return (
<div>
<EasyPdf ref={pdfRef}>
<div className="max-w-4xl mx-auto p-8">
{/* Grid Layout */}
<div className="grid grid-cols-2 gap-6 mb-8">
<div className="bg-white p-6 rounded-lg shadow-lg">
<h3 className="text-xl font-bold text-gray-800 mb-3">
Left Column
</h3>
<p className="text-gray-600">Content for the left column...</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-lg">
<h3 className="text-xl font-bold text-gray-800 mb-3">
Right Column
</h3>
<p className="text-gray-600">Content for the right column...</p>
</div>
</div>
{/* Cards with Hover Effects */}
<div className="grid grid-cols-3 gap-4">
{["Card 1", "Card 2", "Card 3"].map((title, index) => (
<div
key={index}
className="bg-white p-4 rounded-lg shadow hover:shadow-xl transition-shadow"
>
<h4 className="text-lg font-semibold mb-2">{title}</h4>
<p className="text-sm text-gray-600">
Card content with hover effect...
</p>
</div>
))}
</div>
</div>
</EasyPdf>
</div>
);
};Custom Components
tsx
// Custom styled component for sections
const Section = ({ title, children }) => (
<div className="mb-8">
<h2 className="text-2xl font-bold text-gray-800 mb-4 border-b pb-2">
{title}
</h2>
<div className="pl-4 border-l-4 border-blue-500">{children}</div>
</div>
);
// Custom styled component for info boxes
const InfoBox = ({ type = "info", title, children }) => {
const styles = {
info: "bg-blue-50 border-blue-500 text-blue-700",
warning: "bg-yellow-50 border-yellow-500 text-yellow-700",
error: "bg-red-50 border-red-500 text-red-700",
success: "bg-green-50 border-green-500 text-green-700",
};
return (
<div className={`p-4 border-l-4 rounded-r ${styles[type]} mb-4`}>
{title && <h4 className="font-bold mb-2">{title}</h4>}
<div className="text-sm">{children}</div>
</div>
);
};
const StyledDocument = () => {
const { pdfRef, downloadPDF } = useEasyPdf();
return (
<div>
<EasyPdf ref={pdfRef}>
<div className="max-w-3xl mx-auto p-8">
<Section title="Introduction">
<p className="text-gray-700 mb-4">
This section demonstrates custom styled components.
</p>
<InfoBox title="Important Note" type="info">
This is an important information box with custom styling.
</InfoBox>
</Section>
<Section title="Warnings and Errors">
<InfoBox type="warning" title="Warning">
This is a warning message with custom styling.
</InfoBox>
<InfoBox type="error" title="Error">
This is an error message with custom styling.
</InfoBox>
</Section>
</div>
</EasyPdf>
</div>
);
};Tables and Lists
tsx
const TablesAndLists = () => {
const { pdfRef, downloadPDF } = useEasyPdf();
return (
<div>
<EasyPdf ref={pdfRef}>
<div className="max-w-3xl mx-auto p-8">
{/* Styled Table */}
<table className="w-full mb-8">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left font-bold text-gray-700">
Header 1
</th>
<th className="px-4 py-2 text-left font-bold text-gray-700">
Header 2
</th>
</tr>
</thead>
<tbody>
<tr className="border-b">
<td className="px-4 py-2">Cell 1</td>
<td className="px-4 py-2">Cell 2</td>
</tr>
<tr className="border-b bg-gray-50">
<td className="px-4 py-2">Cell 3</td>
<td className="px-4 py-2">Cell 4</td>
</tr>
</tbody>
</table>
{/* Styled Lists */}
<div className="space-y-6">
{/* Ordered List */}
<div>
<h3 className="text-xl font-bold mb-3">Ordered List</h3>
<ol className="list-decimal pl-6 space-y-2">
<li className="text-gray-700">First item</li>
<li className="text-gray-700">Second item</li>
<li className="text-gray-700">Third item</li>
</ol>
</div>
{/* Unordered List */}
<div>
<h3 className="text-xl font-bold mb-3">Unordered List</h3>
<ul className="list-disc pl-6 space-y-2">
<li className="text-gray-700">First item</li>
<li className="text-gray-700">Second item</li>
<li className="text-gray-700">Third item</li>
</ul>
</div>
</div>
</div>
</EasyPdf>
</div>
);
};Best Practices
Use Consistent Styling
- Maintain a consistent color scheme
- Use consistent spacing and margins
- Keep typography consistent
Optimize for PDF Output
- Test how styles render in the PDF
- Ensure fonts are properly loaded
- Consider page breaks in your layout
Responsive Design
- Use relative units when appropriate
- Test with different page sizes
- Consider print media queries
Performance
- Minimize nested styles
- Use efficient CSS selectors
- Optimize images and assets