React PDF Viewer is a powerful React component for viewing PDF documents in web applications. It provides a feature-rich, customizable interface for rendering and interacting with PDF files, supporting various viewing modes, annotations, and search functionality.

Pros

• High performance and smooth rendering of PDF documents
• Extensive customization options and plugin system
• Responsive design, suitable for both desktop and mobile devices
• Comprehensive documentation and examples

Cons

• Relatively large bundle size due to its feature-rich nature
• Learning curve for advanced customizations and plugin development
• Limited browser support for older versions (IE11 not supported)
• Requires a commercial license for use in non-open-source projects

Code Examples

1. Basic usage:

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const App = () => (
  <div style={{ height: '750px' }}>
    <Viewer fileUrl="/path/to/document.pdf" />
  </div>
);

2. Using plugins:

import { Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

const defaultLayoutPluginInstance = defaultLayoutPlugin();

const App = () => (
  <div style={{ height: '750px' }}>
    <Viewer
      fileUrl="/path/to/document.pdf"
      plugins={[defaultLayoutPluginInstance]}
    />
  </div>
);

3. Custom toolbar:

import { Viewer, ToolbarSlot } from '@react-pdf-viewer/core';
import { toolbarPlugin } from '@react-pdf-viewer/toolbar';

const toolbarPluginInstance = toolbarPlugin();
const { Toolbar } = toolbarPluginInstance;

const App = () => (
  <div style={{ height: '750px' }}>
    <div style={{ height: '50px' }}>
      <Toolbar>
        {(slots: ToolbarSlot) => {
          const { ZoomIn, ZoomOut } = slots;
          return (
            <>
              <ZoomOut />
              <ZoomIn />
            </>
          );
        }}
      </Toolbar>
    </div>
    <div style={{ height: 'calc(100% - 50px)' }}>
      <Viewer
        fileUrl="/path/to/document.pdf"
        plugins={[toolbarPluginInstance]}
      />
    </div>
  </div>
);

Getting Started

1. Install the package:

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout

2. Import and use the Viewer component:

import { Viewer } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

const defaultLayoutPluginInstance = defaultLayoutPlugin();

const App = () => (
  <div style={{ height: '750px' }}>
    <Viewer
      fileUrl="/path/to/document.pdf"
      plugins={[defaultLayoutPluginInstance]}
    />
  </div>
);

export default App;