Adex React PDF Viewer
npm install adex-react-pdf-viewerCurrent theme: default-theme (auto-changing)
npm install adex-react-pdf-viewerA 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.
Page thumbnails, navigation controls, and smooth scrolling between pages for easy document navigation.
Full-text search with result highlighting, navigation between search results, and a results sidebar.
Add notes, highlights, and drawings to your documents with customizable colors and persistent storage.
Support for PDF outlines and custom bookmarks with localStorage persistence for easy navigation.
Print support with customizable options, direct download, and document information panel.
Optimized for both desktop and mobile devices with a responsive layout that adapts to any screen size.
Support for 35+ languages with easy language switching and customizable translations for all UI elements.
Choose from 13 built-in themes including dark mode, high contrast, sepia, and professional styles to customize the viewer's appearance.
Get started with AdexViewer in your React application with just a few simple steps.
npm install adex-react-pdf-viewerIntegrate AdexViewer into your React application with just a few lines of code.
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;Customize AdexViewer to fit your needs with these configuration options.
| 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 |
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 for the viewer interface | 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
}localization: [
{ locale: "en", title: "English", active: true },
{ locale: "ar", title: "العربية", active: false },
{ locale: "bg", title: "Български", active: false },
{ locale: "bn", title: "বাংলা", active: false },
{ locale: "ca", title: "Català", active: false },
{ locale: "cs", title: "Čeština", active: false },
{ locale: "de", title: "Deutsch", active: false },
{ locale: "el", title: "Ελληνικά", active: false },
{ locale: "es", title: "Español", active: false },
{ locale: "fi", title: "Suomi", active: false },
{ locale: "fr", title: "Français", active: false },
{ locale: "he", title: "עברית", active: false },
{ locale: "hi", title: "हिन्दी", active: false },
{ locale: "id", title: "Bahasa Indonesia", active: false },
{ locale: "it", title: "Italiano", active: false },
{ locale: "ja", title: "日本語", active: false },
{ locale: "ko", title: "한국어", active: false },
// ... and many 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 defaultAdexViewer comes with support for 35+ languages including:
| 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 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"
/>Contribute to AdexViewer or customize it for your specific needs.
git clone https://github.com/abhibagul/Adex-React-PDF-Viewer.git
cd Adex-React-PDF-Viewer
npm installnpm run buildnpm link