Modern React PDF Components
Display PDFs beautifully in React and Next.js applications. TypeScript support, SSR compatible, and optimized for performance.
Quick Start
Get up and running in minutes with just a few lines of code.
Requirements
- React 18+ or Next.js 13+
- Node.js 16 or higher
- npm or yarn package manager
Installation
npm:
npm install @pdf-embed-seo/react yarn:
yarn add @pdf-embed-seo/react pnpm:
pnpm add @pdf-embed-seo/react Code Examples
Simple, intuitive API for embedding PDFs in your React applications.
Basic Usage
import { PdfViewer } from '@pdf-embed-seo/react';
export default function DocumentPage() { return ( <PdfViewer src="/documents/annual-report.pdf" title="Annual Report 2024" height="600px" /> );
}Next.js App Router
'use client';
import dynamic from 'next/dynamic';
const PdfViewer = dynamic( () => import('@pdf-embed-seo/react').then(mod => mod.PdfViewer), { ssr: false, loading: () => <div>Loading PDF...</div> }
);
export default function DocumentPage() { return ( <PdfViewer src="/documents/whitepaper.pdf" title="Product Whitepaper" allowDownload={true} allowPrint={true} /> );
}With Event Handlers
import { PdfViewer } from '@pdf-embed-seo/react';
export default function DocumentPage() { const handleLoad = (pdf) => { console.log('PDF loaded:', pdf.numPages, 'pages'); }; const handlePageChange = (page) => { console.log('Current page:', page); }; return ( <PdfViewer src="/documents/guide.pdf" onLoad={handleLoad} onPageChange={handlePageChange} onError={(error) => console.error(error)} /> );
}Component Props
Full TypeScript support with detailed prop definitions.
| Prop | Type | Required | Description |
|---|---|---|---|
| src | string | Yes | URL or path to the PDF file |
| title | string | No | Document title for SEO and accessibility |
| height | string | No | Viewer height (default: "600px") |
| width | string | No | Viewer width (default: "100%") |
| allowDownload | boolean | No | Show download button (default: true) |
| allowPrint | boolean | No | Show print button (default: true) |
| theme | "light" | "dark" | No | Viewer theme (default: "light") |
| initialPage | number | No | Initial page to display (default: 1) |
| onLoad | function | No | Callback when PDF loads |
| onError | function | No | Callback on load error |
| onPageChange | function | No | Callback when page changes |
Built for Modern React
The same technology that powers Firefox's PDF viewer, optimized for React and Next.js applications.
TypeScript Support
Full TypeScript definitions for type-safe development with autocomplete in your IDE.
Tree-shakeable
Only import what you need. Optimized bundle size for faster page loads.
SSR Compatible
Works with Next.js App Router, Pages Router, and server-side rendering.
Headless CMS Integration
Fetch PDFs from WordPress or Drupal via their REST APIs and display them in your React frontend.
WordPress REST API Example
import { PdfViewer } from '@pdf-embed-seo/react';
import { useEffect, useState } from 'react';
export default function DocumentPage({ slug }) { const [pdf, setPdf] = useState(null); useEffect(() => { fetch(`https://your-wp-site.com/wp-json/pdf-embed-seo/v1/documents/${slug}`) .then(res => res.json()) .then(data => setPdf(data)); }, [slug]); if (!pdf) return <div>Loading...</div>; return ( <PdfViewer src={pdf.pdf_url} title={pdf.title} allowDownload={pdf.allow_download} allowPrint={pdf.allow_print} /> );
}Free vs Pro vs Pro+
Compare free, Pro, and Pro+ React components and hooks.
What is GDPR?
The General Data Protection Regulation (GDPR) is a European Union regulation that protects the personal data and privacy of individuals in the EU/EEA. It requires organizations to minimize data collection, provide transparency, and give individuals control over their data. Our React components support GDPR with IP anonymization, no third-party data transfers, consent management, and audit logging.
What is HIPAA?
The Health Insurance Portability and Accountability Act (HIPAA) is a US federal law that protects sensitive patient health information (PHI). It requires access controls, audit trails, data integrity, and transmission security. Our React components support HIPAA with role-based access control, two-factor authentication, complete audit logs, and secure document delivery.
PDF Embed & SEO Optimize provides technical controls that support GDPR and HIPAA compliance. Compliance responsibility remains with your organization.
Start Building Today
Add professional PDF viewing to your React or Next.js application in minutes. Free to use, MIT licensed.
npm install @pdf-embed-seo/react Using WordPress or Drupal instead? Get the WordPress plugin → | Get the Drupal module →
Download Free PDF Viewer Module for React / Next.js
Get the open-source PDF viewer component for your React or Next.js website. Lightweight, TypeScript-ready, and fully customizable. No registration required.