A powerful, feature-rich PDF viewer component for React applications. Built on top of react-pdf, AdexViewer provides a complete solution for viewing, annotating, and interacting with PDF documents in your web applications.
- 📄 Document Navigation: Page thumbnails, navigation controls, and smooth scrolling
- 🔍 Search: Full-text search with result highlighting and navigation
- 📑 Bookmarks & Outline: Support for document outlines and custom bookmarks
- ✏️ Annotations: Add notes, highlights, and drawings to your documents
- 🔄 Rotation & Zoom: Rotate pages and adjust zoom levels
- 📱 Responsive Design: Optimized for both desktop and mobile devices
- 🖨️ Print Support: Print documents with customizable options
- 🌙 Text Selection: Enable or disable text selection and copying
- 🔗 Download: Direct download option for PDF files
- 🖼️ Fullscreen Mode: Immersive viewing experience
- 📊 Document Info: View and display PDF metadata
- 🌍 Internationalization: Support for multiple languages with easy switching
- 🎨 Themes: Multiple built-in themes to customize the appearance
With NPM:
npm install adex-react-pdf-viewerFor yarn:
yarn add adex-react-pdf-viewer
import React from "react";
import AdexViewer from "adex-react-pdf-viewer";
import "adex-react-pdf-viewer/index.css"; // Import styles
function App() {
return (
<div style={{ height: "100vh" }}>
<AdexViewer
data={{ url: "https://example.com/sample.pdf" }}
/>
</div>
);
}
export default App;
| Prop | Type | Description | Default |
|---|---|---|---|
data |
object | { url: string } - URL of the PDF file to display |
Required |
credits |
boolean | Show or hide attribution credits | true |
showSidebar |
boolean | Show or hide the sidebar on initial load | false |
showToolbar |
boolean | Show or hide the toolbar | true |
showControls |
object | Configure which controls to display (see below) | See below |
defaultValues |
object | Set default zoom, page, and fullscreen state | See below |
responsive |
object | Configure responsive behavior | See below |
textOptions |
object | Configure text selection and copying | See below |
printOptions |
object | Configure print behavior | See below |
localization |
array | Configure language options (see below) | See below |
theme |
string | Set the theme for the viewer (see themes section) | See below |
showControls: {
navigation: true, // Page navigation controls
zoom: true, // Zoom controls
fullscreen: true, // Fullscreen button
download: true, // Download button
info: true, // Document info button
sidebarButton: true, // Sidebar toggle button
rotation: true, // Page rotation controls
print: true, // Print button
search: true, // Search functionality
bookmarks: true, // Bookmarks functionality
annotations: true, // Annotations functionality
localization: true // Language selection button
}
defaultValues: {
zoom: 1.25, // Initial zoom level (0.5 to 3)
page: 1, // Initial page number
fullscreen: false // Start in fullscreen mode
}
textOptions: {
enableSelection: true, // Allow text selection
enableCopy: true // Allow text copying
}
printOptions: {
printBackground: true, // Print background graphics
pageRangeEnabled: true // Enable page range selection
}
The localization prop accepts an array of LocalizationOptions objects that define the available languages for the viewer interface. Each object has the following properties:
localization: [
{ locale: "en", title: "English", active: true },
{ locale: "es", title: "Español", active: false },
{ locale: "fr", title: "Français", active: false },
// ... more languages
]
Each language object contains:
locale: The language code (used for loading translation files)title: The display name of the languageactive: Whether this language is active by default
AdexViewer comes with multiple built-in themes to customize the appearance of the viewer.
To use a theme, you need to:
- Import the theme CSS file:
import "adex-react-pdf-viewer/themes/blue-theme.css";- Provide the theme name to the component:
<AdexViewer
data={{ url: "https://pdfobject.com/pdf/pdf_open_parameters_acro8.pdf" }}
theme="blue-theme"
/>
The following themes are available:
| Theme Name | Description |
|---|---|
"default-theme" |
The standard theme with a clean, neutral design suitable for most applications |
"blue-theme" |
A modern theme with blue accents and a professional appearance |
"dark-theme" |
Dark background with light text, ideal for low-light environments and reducing eye strain |
"minimal-theme" |
A simplified interface with reduced visual elements for a distraction-free reading experience |
"corporate-theme" |
Formal design with subtle colors suitable for business and enterprise applications |
"professional-theme" |
Polished interface with refined controls and balanced color scheme |
"high-contrast-theme" |
Enhanced contrast between elements for improved accessibility and readability |
"night-mode-theme" |
Dark background with optimized colors for nighttime reading |
"sepia-theme" |
Warm, yellowish-brown tones that reduce eye strain for extended reading sessions |
"retro-theme" |
Nostalgic design inspired by classic windown 95 style document viewers |
"adobe-theme" |
Inspired by Adobe's PDF viewer interface for users familiar with that environment |
"microsoft-theme" |
Design elements reminiscent of Microsoft's document viewing applications |
"acrobat-theme" |
Styled after Adobe Acrobat's interface for a familiar experience |
AdexViewer supports multiple languages through its localization system. The component will:
- Load language files from the
/locales/{locale}.jsondirectory - Allow users to switch languages via the language selector
- Remember the user's language preference in localStorage
The viewer comes with support for 35+ languages including:
| Language Code | Language Name | Language Code | Language Name | Language Code | Language Name |
|---|---|---|---|---|---|
| en | English | ar | العربية (Arabic) | bg | Български (Bulgarian) |
| bn | বাংলা (Bengali) | ca | Català (Catalan) | cs | Čeština (Czech) |
| de | Deutsch (German) | el | Ελληνικά (Greek) | es | Español (Spanish) |
| fi | Suomi (Finnish) | fr | Français (French) | he | עברית (Hebrew) |
| hi | हिन्दी (Hindi) | id | Bahasa Indonesia | it | Italiano (Italian) |
| ja | 日本語 (Japanese) | ko | 한국어 (Korean) | mr | मराठी (Marathi) |
| ms | Bahasa Melayu | nl | Nederlands (Dutch) | no | Norsk (Norwegian) |
| pa | ਪੰਜਾਬੀ (Punjabi) | pl | Polski (Polish) | pt | Português |
| ro | Română (Romanian) | ru | Русский (Russian) | sv | Svenska (Swedish) |
| sw | Kiswahili (Swahili) | ta | தமிழ் (Tamil) | te | తెలుగు (Telugu) |
| th | ไทย (Thai) | tr | Türkçe (Turkish) | uk | Українська (Ukrainian) |
| vi | Tiếng Việt (Vietnamese) | zh-CN | 简体中文 (Simplified Chinese) | zh_TW | 繁體中文 (Traditional Chinese) |
AdexViewer supports three types of annotations:
- Notes: Add floating note markers with custom text
- Highlights: Highlight text selections with custom colors
- Drawings: Create freehand drawings on any page
Annotations are automatically saved to localStorage and persist between sessions.
The search feature allows users to:
- Search for text across the entire document
- Navigate between search results
- See highlighted matches with context
- View a list of all matches with page numbers
AdexViewer supports both:
- Document Outline: Displays the PDF's built-in table of contents
- Custom Bookmarks: Allows users to add their own bookmarks to specific pages
The viewer is fully responsive and includes:
- Simplified interface on smaller screens
- Optimized performance for mobile devices
AdexViewer works in all modern browsers:
- Chrome, Firefox, Safari, Edge (latest versions)
- IE11 is not supported
Contributions are welcome! Please feel free to submit a Pull Request.
Clone the repository:
git clone https://github.com/abhibagul/Adex-React-PDF-Viewer.git
cd Adex-React-PDF-Viewer
npm install
Build the package:
npm run build
to link and use in the project:
npm link
setup the react project and link package using:
npm link adex-react-pdf-viewer
This project is licensed under the MIT License - see the LICENSE file for details.
AdexViewer is created with ❤️ by Abhishek Bagul.