Adex React PDF Viewer v1.0.9

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.

🌐 Live Demo

🔗 View Adex Viewer Here

✨ Features

• 📄 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

🚀 Installation

With NPM:

npm install adex-react-pdf-viewer

For yarn:

yarn add adex-react-pdf-viewer

📖 Basic Usage

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;

🛠️ Props

showControls Object

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 Object

defaultValues: {
  zoom: 1.25,            // Initial zoom level (0.5 to 3)
  page: 1,               // Initial page number
  fullscreen: false      // Start in fullscreen mode
}

textOptions Object

textOptions: {
  enableSelection: true,   // Allow text selection
  enableCopy: true         // Allow text copying
}

printOptions Object

printOptions: {
  printBackground: true,     // Print background graphics
  pageRangeEnabled: true     // Enable page range selection
}

localization Array

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 language
• active: Whether this language is active by default

🎨 Themes

AdexViewer comes with multiple built-in themes to customize the appearance of the viewer.

Using Themes

To use a theme, you need to:

1. Import the theme CSS file:

import "adex-react-pdf-viewer/themes/blue-theme.css";

2. Provide the theme name to the component:

<AdexViewer
  data={{ url: "https://pdfobject.com/pdf/pdf_open_parameters_acro8.pdf" }}
  theme="blue-theme"
/>

Available Theme Options

The following themes are available:

🌍 Internationalization

AdexViewer supports multiple languages through its localization system. The component will:

1. Load language files from the /locales/{locale}.json directory
2. Allow users to switch languages via the language selector
3. Remember the user's language preference in localStorage

Supported Languages

The viewer comes with support for 35+ languages including:

🎨 Annotations

AdexViewer supports three types of annotations:

1. Notes: Add floating note markers with custom text
2. Highlights: Highlight text selections with custom colors
3. Drawings: Create freehand drawings on any page

Annotations are automatically saved to localStorage and persist between sessions.

🔍 Search Functionality

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

📑 Bookmarks and Document Outline

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

📱 Mobile Support

The viewer is fully responsive and includes:

• Simplified interface on smaller screens
• Optimized performance for mobile devices

🖥️ Browser Compatibility

AdexViewer works in all modern browsers:

• Chrome, Firefox, Safari, Edge (latest versions)
• IE11 is not supported

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🛠️ Development

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Created By

AdexViewer is created with ❤️ by Abhishek Bagul.