### Install React PDF with Yarn

Source: https://docs.react-pdf.dev/introduction/getting-started

Installs the React PDF library using the Yarn package manager. This command fetches and installs the necessary packages for the project.

```bash
yarn add react-pdf
```

--------------------------------

### Install React PDF with Bun

Source: https://docs.react-pdf.dev/introduction/getting-started

Installs the React PDF library using the Bun package manager. This command fetches and installs the necessary packages for the project.

```bash
bun install
```

--------------------------------

### Install React PDF with npm

Source: https://docs.react-pdf.dev/introduction/getting-started

Installs the React PDF library using the npm package manager. This command fetches and installs the necessary packages for the project.

```bash
npm install react-pdf
```

--------------------------------

### Install React PDF with pnpm

Source: https://docs.react-pdf.dev/introduction/getting-started

Installs the React PDF library using the pnpm package manager. This command fetches and installs the necessary packages for the project.

```bash
pnpm add react-pdf
```

--------------------------------

### Install Canvas Dependencies with Brew

Source: https://docs.react-pdf.dev/introduction/getting-started

Installs the 'canvas' package dependencies using the Homebrew package manager, often required for React PDF on Apple M series chipsets.

```bash
brew install canvas
```

--------------------------------

### Clear Bun Cache

Source: https://docs.react-pdf.dev/introduction/getting-started

Clears the cache for the Bun package manager. This can help resolve installation issues by removing potentially corrupted cached package data.

```bash
bun pm cache rm
```

--------------------------------

### React PDF Viewer with URL Source (JSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Demonstrates how to use the React PDF viewer with a PDF file sourced from a URL. This example shows the basic prop setup for fetching external PDF content.

```JSX
import React from 'react';
import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from 'react-pdf';

function App() {
  const pdfUrl = 'https://example.com/path/to/your/document.pdf';

  return (
    <RPConfig>
      <RPProvider src={pdfUrl}>
        <RPDefaultLayout style={{ width: '100%', height: '500px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
}

export default App;
```

--------------------------------

### React PDF Basic Viewer Setup (TSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Illustrates the basic TypeScript (TSX) setup for a React PDF viewer, including essential configuration and provider components for core functionality.

```TSX
import React from 'react';
import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from 'react-pdf';

function AppPdfViewer(): JSX.Element {
  return (
    <RPConfig>
      <RPProvider>
        <RPDefaultLayout style={{ width: '100%', height: '500px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
}

export default AppPdfViewer;
```

--------------------------------

### Start Using Reusable PDF Component (Next.js)

Source: https://docs.react-pdf.dev/usage-guide/reusable-react-pdf

Instructions on how to start using the reusable `LazyReactPdfViewer` component anywhere within your Next.js application's pages after setting up the configuration.

```JSX
import React from 'react';
import { LazyReactPdfViewer } from './components'; // Assuming components are in './components'

const AnotherPage = () => {
  const pdfUrl = '/path/to/final/document.pdf';

  return (
    <div>
      <h2>Viewing Document</h2>
      <LazyReactPdfViewer pdfUrl={pdfUrl} />
    </div>
  );
};

export default AnotherPage;
```

```TSX
import React from 'react';
import { LazyReactPdfViewer } from './components'; // Assuming components are in './components'

const AnotherPage: React.FC = () => {
  const pdfUrl = '/path/to/final/document.pdf';

  return (
    <div>
      <h2>Viewing Document</h2>
      <LazyReactPdfViewer pdfUrl={pdfUrl} />
    </div>
  );
};

export default AnotherPage;
```

--------------------------------

### RPConfig Component Setup

Source: https://docs.react-pdf.dev/components/rp-config

Demonstrates how to set up the RPConfig component at the root of a React application to configure global settings for React PDF, such as the license key.

```jsx
import React from 'react';
import { RPConfig } from '@react-pdf/renderer';

function App() {
  return (
    <RPConfig licenseKey="YOUR_LICENSE_KEY">
      {/* Your application components */}
    </RPConfig>
  );
}
```

--------------------------------

### Next.js Client-Side PDF Viewer Setup (TSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Illustrates the TSX code for implementing a client-side PDF viewer in Next.js, focusing on dynamic imports and provider setup for server-side rendering exclusion.

```TSX
import dynamic from 'next/dynamic';
import React from 'react';

const RPConfig = dynamic(() => import('react-pdf').then((mod) => mod.RPConfig), {
  ssr: false,
});
const RPProvider = dynamic(() => import('react-pdf').then((mod) => mod.RPProvider), {
  ssr: false,
});
const RPDefaultLayout = dynamic(() => import('react-pdf').then((mod) => mod.RPDefaultLayout), {
  ssr: false,
});
const RPPages = dynamic(() => import('react-pdf').then((mod) => mod.RPPages), {
  ssr: false,
});

function AppPdfViewer(): JSX.Element {
  return (
    <RPConfig>
      <RPProvider>
        <RPDefaultLayout style={{ width: '100%', height: '500px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
}

export default AppPdfViewer;
```

--------------------------------

### React PDF Basic Viewer Setup (JSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Demonstrates the fundamental JSX structure for setting up a React PDF viewer. It includes the necessary configuration and provider components for basic functionality.

```JSX
import React from 'react';
import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from 'react-pdf';

function AppPdfViewer() {
  return (
    <RPConfig>
      <RPProvider>
        <RPDefaultLayout style={{ width: '100%', height: '500px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
}

export default AppPdfViewer;
```

--------------------------------

### Prepare Reusable Component and Config (Next.js)

Source: https://docs.react-pdf.dev/usage-guide/reusable-react-pdf

Guides on preparing a reusable PDF component and a configuration component for use in a Next.js project. This involves importing necessary providers and layout components.

```JSX
import React from 'react';
import { RPProvider, RPDefaultLayout, RPPages, RPConfig } from 'your-react-pdf-library';

const MyPdfLayout = ({ children }) => (
  <RPProvider>
    <RPDefaultLayout>
      <RPPages>
        {children}
      </RPPages>
    </RPDefaultLayout>
  </RPProvider>
);

const MyPdfConfig = () => (
  <RPConfig>
    {/* Configuration options */}
    <p>PDF Configuration</p>
  </RPConfig>
);

export { MyPdfLayout, MyPdfConfig };
```

```TSX
import React from 'react';
import { RPProvider, RPDefaultLayout, RPPages, RPConfig } from 'your-react-pdf-library';

const MyPdfLayout: React.FC = ({ children }) => (
  <RPProvider>
    <RPDefaultLayout>
      <RPPages>
        {children}
      </RPPages>
    </RPDefaultLayout>
  </RPProvider>
);

const MyPdfConfig: React.FC = () => (
  <RPConfig>
    {/* Configuration options */}
    <p>PDF Configuration</p>
  </RPConfig>
);

export { MyPdfLayout, MyPdfConfig };
```

--------------------------------

### Next.js Client-Side PDF Viewer Setup (JSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Provides the JSX code for setting up a client-side PDF viewer in a Next.js application, ensuring proper dynamic import and provider encapsulation.

```JSX
import dynamic from 'next/dynamic';
import React from 'react';

const RPConfig = dynamic(() => import('react-pdf').then((mod) => mod.RPConfig), {
  ssr: false,
});
const RPProvider = dynamic(() => import('react-pdf').then((mod) => mod.RPProvider), {
  ssr: false,
});
const RPDefaultLayout = dynamic(() => import('react-pdf').then((mod) => mod.RPDefaultLayout), {
  ssr: false,
});
const RPPages = dynamic(() => import('react-pdf').then((mod) => mod.RPPages), {
  ssr: false,
});

function AppPdfViewer() {
  return (
    <RPConfig>
      <RPProvider>
        <RPDefaultLayout style={{ width: '100%', height: '500px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
}

export default AppPdfViewer;
```

--------------------------------

### Example Usage of useElementPageContext in React

Source: https://docs.react-pdf.dev/hooks/use-element-page-context

To utilize the `useElementPageContext` hook, ensure the component using it is a child of `RPProvider`. This example demonstrates setting up a `CustomElementPage` component to manage custom elements on PDF pages.

```jsx
import React from 'react';
import { RPProvider, useElementPageContext } from '@react-pdf-viewer';

const CustomElementPage = ({ pageNumber }) => {
  const { updateElement, removeElement, clearElements, elementList } = useElementPageContext();

  const addBox = () => {
    updateElement(pageNumber, ({ width, height }) => (
      <div
        style={{
          border: '2px solid red',
          width: `${width / 2}px`,
          height: `${height / 2}px`,
          position: 'absolute',
          left: `${width / 4}px`,
          top: `${height / 4}px`,
        }}
      />
    ));
  };

  const removeLastBox = () => {
    const elementsOnPage = elementList[pageNumber] || [];
    if (elementsOnPage.length > 0) {
      removeElement(pageNumber, elementsOnPage.length - 1);
    }
  };

  return (
    <div>
      <button onClick={addBox}>Add Box</button>
      <button onClick={removeLastBox}>Remove Last Box</button>
      <button onClick={() => clearElements(pageNumber)}>Clear All Boxes</button>
    </div>
  );
};

const App = () => (
  <RPProvider>
    {/* Your PDFViewer component here */}
    <CustomElementPage pageNumber={1} />
  </RPProvider>
);

export default App;
```

--------------------------------

### Install specific pdfjs-dist version

Source: https://docs.react-pdf.dev/usage-guide/overriding-dependency

Shows how to install a specific version of the pdfjs-dist package using npm, bun, pnpm, or yarn. This is useful when you need a version different from the latest or the default peer dependency.

```bash
# Using npm
npm install pdfjs-dist@4.7.76

# Using bun
bun add pdfjs-dist@4.7.76

# Using pnpm
pnpm add pdfjs-dist@4.7.76

# Using yarn
yarn add pdfjs-dist@4.7.76
```

--------------------------------

### Using React PDF Hooks within RPProvider

Source: https://docs.react-pdf.dev/hooks/overview

Demonstrates the basic usage of React PDF hooks. To utilize any hook, it must be called within a component that is a child of the `RPProvider`. This example illustrates how to integrate common hooks into your React components.

```jsx
import React from 'react';
import {
  RPProvider,
  useOpenFileContext,
  useFileDownload,
  usePrintContext
} from 'react-pdf';

function PdfViewer() {
  const { openFile } = useOpenFileContext();
  const { downloadFile } = useFileDownload();
  const { printFile } = usePrintContext();

  return (
    <div>
      <button onClick={() => openFile('path/to/your/document.pdf')}>Open PDF</button>
      <button onClick={() => downloadFile()}>Download PDF</button>
      <button onClick={() => printFile()}>Print PDF</button>
    </div>
  );
}

function App() {
  return (
    <RPProvider>
      <PdfViewer />
    </RPProvider>
  );
}

export default App;
```

--------------------------------

### React PDF: Configure Top Bar Icons

Source: https://docs.react-pdf.dev/usage-guide/basic-toolbar-usage

This example shows how to configure the visibility of icons on the top bar of the React PDF viewer. The RPSlot component allows specifying which icons to display.

```jsx
import { RPSlot } from 'react-pdf';

function MyViewer() {
  return (
    <RPSlot
      toolbarVisible={true} // Example: Ensure toolbar is visible
      toolbarIconSettings={{
        zoomIn: true,
        zoomOut: true,
        pageNumber: true,
        // Add other icon settings as needed
      }}
    />
  );
}
```

--------------------------------

### Implement Custom Drop File Zone with useDropFileZoneContext

Source: https://docs.react-pdf.dev/hooks/use-drop-file-zone-context

This example demonstrates how to create a custom drop file zone component using the `useDropFileZoneContext` hook. It manages the drag and drop state and provides handlers for drag enter, drag leave, and drop events, requiring the component to be a child of `RPProvider`.

```jsx
import React from 'react';
import { useDropFileZoneContext } from '@react-pdf-viewer/core';

const CustomDropFileZone = () => {
    const { dragging, handleDragEnter, handleDragLeave, handleDrop } = useDropFileZoneContext();

    return (
        <div
            onDragEnter={handleDragEnter}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            style={{
                border: `2px dashed ${dragging ? 'green' : 'gray'}`, 
                padding: '20px',
                textAlign: 'center'
            }}
        >
            {dragging ? 'Release your PDF file here' : 'Drag and drop your PDF file here'}
        </div>
    );
};

export default CustomDropFileZone;
```

```tsx
import React from 'react';
import { useDropFileZoneContext, RPProvider } from '@react-pdf-viewer/core';

const CustomDropFileZone: React.FC = () => {
    const { dragging, handleDragEnter, handleDragLeave, handleDrop } = useDropFileZoneContext();

    return (
        <div
            onDragEnter={handleDragEnter}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            style={{
                border: `2px dashed ${dragging ? 'green' : 'gray'}`, 
                padding: '20px',
                textAlign: 'center'
            }}
        >
            {dragging ? 'Release your PDF file here' : 'Drag and drop your PDF file here'}
        </div>
    );
};

const App = () => (
    <RPProvider>
        <CustomDropFileZone />
    </RPProvider>
);

export default App;
```

--------------------------------

### Toggle Fullscreen with useFullScreenContext

Source: https://docs.react-pdf.dev/hooks/use-full-screen-context

This example demonstrates how to use the `useFullScreenContext` hook to create a custom button that toggles the fullscreen mode for a PDF viewer. It requires the component to be a child of `RPProvider`.

```jsx
import React from 'react';
import { useFullScreenContext } from 'react-pdf';

const CustomFullScreenButton = () => {
  const { toggleFullScreen, isFullScreen, isSupported } = useFullScreenContext();

  if (!isSupported) {
    return null;
  }

  return (
    <button onClick={toggleFullScreen}>
      {isFullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
    </button>
  );
};

export default CustomFullScreenButton;
```

```tsx
import React from 'react';
import { useFullScreenContext } from 'react-pdf';

const CustomFullScreenButton: React.FC = () => {
  const { toggleFullScreen, isFullScreen, isSupported } = useFullScreenContext();

  if (!isSupported) {
    return null;
  }

  return (
    <button onClick={toggleFullScreen}>
      {isFullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
    </button>
  );
};

export default CustomFullScreenButton;
```

--------------------------------

### Customize jumpNavigationTool in React-PDF

Source: https://docs.react-pdf.dev/components/rp-layout

Details how to hide the jump to page UI by setting `jumpNavigationTool` to `false` in the `slots` prop. No custom component example is provided for this tool in the source text.

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        jumpNavigationTool: false // Hides the default jump to page UI
      }
    }}
  />
);

export default App;
```

--------------------------------

### Configure RPLayout Dimensions

Source: https://docs.react-pdf.dev/components/rp-layout

This example demonstrates how to configure the RPLayout component's dimensions. It sets the height to 100% of the parent component and the width to 720px, overriding the default values.

```jsx
import React from 'react';
import { RPLayout } from '@react-pdf-viewer/core';

const MyViewer = () => (
    <div style={{ width: '100%', height: '720px' }}>
        <RPLayout />
    </div>
);
```

--------------------------------

### Add Button to Toolbar and Show Document Properties

Source: https://docs.react-pdf.dev/customization/customize-toolbar-rplayout

This example demonstrates adding a custom button to the React PDF toolbar. Clicking the button displays the document's properties by utilizing the `useDocumentContext` hook.

```jsx
import { RPLayout, useDocumentContext } from "react-pdf";
import React from "react";

const DocumentPropertiesButton = () => {
  const { showDocumentProperties } = useDocumentContext();

  return (
    <RPLayout.Toolbar.Button onClick={showDocumentProperties}>
      Document Properties
    </RPLayout.Toolbar.Button>
  );
};

export default DocumentPropertiesButton;
```

```tsx
import { RPLayout, useDocumentContext } from "react-pdf";
import React from "react";

const DocumentPropertiesButton: React.FC = () => {
  const { showDocumentProperties } = useDocumentContext();

  return (
    <RPLayout.Toolbar.Button onClick={showDocumentProperties}>
      Document Properties
    </RPLayout.Toolbar.Button>
  );
};

export default DocumentPropertiesButton;
```

--------------------------------

### Prepend Button to Top Bar Right Section (TSX)

Source: https://docs.react-pdf.dev/usage-guide/viewer-element-usage

This example shows how to prepend a button to the right section of the PDF viewer's top bar using its `data-rp` attribute in TSX. It includes steps for creating the button, getting the target element, adding the button, and cleaning up.

```tsx
const topBarRight = document.querySelector<HTMLDivElement>('[data-rp="topBarRight"]');
if (topBarRight) {
  const button = document.createElement('button');
  button.textContent = 'My Button';
  topBarRight.prepend(button);

  // Cleanup function
  return () => {
    button.remove();
  };
}
```

--------------------------------

### Prepend Button to Top Bar Right Section (JSX)

Source: https://docs.react-pdf.dev/usage-guide/viewer-element-usage

This example shows how to prepend a button to the right section of the PDF viewer's top bar using its `data-rp` attribute in JSX. It includes steps for creating the button, getting the target element, adding the button, and cleaning up.

```jsx
const topBarRight = document.querySelector('[data-rp="topBarRight"]');
const button = document.createElement('button');
button.textContent = 'My Button';
topBarRight.prepend(button);
```

--------------------------------

### Customize searchTool in React-PDF

Source: https://docs.react-pdf.dev/components/rp-layout

Details how to hide the search tool by setting `searchTool` to `false` in the `slots` prop. No custom component example is provided for this tool in the source text.

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        searchTool: false // Hides the default search tool
      }
    }}
  />
);

export default App;
```

--------------------------------

### Configure Vite for PDF Handling

Source: https://docs.react-pdf.dev/introduction/basic-usage

This snippet shows how to configure Vite to correctly process PDF files within your project. It involves adding a rule to handle files with the '.pdf' extension.

```JavaScript
import { defineConfig } from 'vite';

export default defineConfig({
  // ... other configurations
  assetsInclude: ['**/*.pdf'],
  // Or using a plugin for more control:
  // plugins: [
  //   {
  //     name: 'vite-plugin-pdf',
  //     transform(code, id) {
  //       if (id.endsWith('.pdf')) {
  //         return `export default ${JSON.stringify(id)};`;
  //       }
  //     }
  //   }
  // ]
});
```

--------------------------------

### Create Reusable PDF Component (React)

Source: https://docs.react-pdf.dev/usage-guide/reusable-react-pdf

Demonstrates how to create a reusable PDF component using React. This involves setting up the component structure with JSX and TypeScript.

```JSX
import React from 'react';

const ReusablePdfComponent = ({ pdfUrl }) => {
  return (
    <div>
      {/* PDF Viewer implementation */}
      <p>Displaying PDF from: {pdfUrl}</p>
    </div>
  );
};

export default ReusablePdfComponent;
```

```TSX
import React from 'react';

interface ReusablePdfComponentProps {
  pdfUrl: string;
}

const ReusablePdfComponent: React.FC<ReusablePdfComponentProps> = ({ pdfUrl }) => {
  return (
    <div>
      {/* PDF Viewer implementation */}
      <p>Displaying PDF from: {pdfUrl}</p>
    </div>
  );
};

export default ReusablePdfComponent;
```

--------------------------------

### Customize rotateTool in React-PDF

Source: https://docs.react-pdf.dev/components/rp-layout

Details how to hide the rotate tool by setting `rotateTool` to `false` in the `slots` prop. No custom component example is provided for this tool in the source text.

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        rotateTool: false // Hides the default rotate tool
      }
    }}
  />
);

export default App;
```

--------------------------------

### Use ReactPdfViewer with RPConfig (React)

Source: https://docs.react-pdf.dev/usage-guide/reusable-react-pdf

Shows how to integrate the `ReactPdfViewer` component within the `RPConfig` context for global configuration. This allows for consistent PDF viewing across the application.

```JSX
import React from 'react';
import { RPConfig, ReactPdfViewer } from 'your-react-pdf-library';

const App = () => {
  const pdfUrl = '/path/to/your/document.pdf';

  return (
    <RPConfig>
      <div>
        <h1>My Document Viewer</h1>
        <ReactPdfViewer pdfUrl={pdfUrl} />
      </div>
    </RPConfig>
  );
};

export default App;
```

```TSX
import React from 'react';
import { RPConfig, ReactPdfViewer } from 'your-react-pdf-library';

const App: React.FC = () => {
  const pdfUrl = '/path/to/your/document.pdf';

  return (
    <RPConfig>
      <div>
        <h1>My Document Viewer</h1>
        <ReactPdfViewer pdfUrl={pdfUrl} />
      </div>
    </RPConfig>
  );
};

export default App;
```

--------------------------------

### Hide Left Sidebar in RPLayout Toolbar

Source: https://docs.react-pdf.dev/components/rp-layout

This example shows how to hide the left sidebar in the RPLayout component's toolbar by excluding the 'leftSidebar' key from the toolbar configuration.

```javascript
const toolbarConfig = {
    ...defaultToolbarConfig,
    leftSidebar: undefined // or simply omit the key
}; 

<RPLayout toolbar={toolbarConfig} />
```

--------------------------------

### Import PDF in Vite JavaScript

Source: https://docs.react-pdf.dev/introduction/basic-usage

Shows how to import a PDF file directly within a JavaScript module when using Vite. Vite handles the path resolution during the build process.

```JavaScript
import pdfFile from './path/to/your/document.pdf';

// Use pdfFile as the URL to your PDF
console.log(pdfFile); // e.g., '/assets/document.a1b2c3d4.pdf'
```

--------------------------------

### Customize scrollModeTool in React-PDF

Source: https://docs.react-pdf.dev/components/rp-layout

Explains how to hide the scroll mode tool by setting `scrollModeTool` to `false` in the `slots` prop. No custom component example is provided for this tool in the source text.

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        scrollModeTool: false // Hides the default scroll mode tool
      }
    }}
  />
);

export default App;
```

--------------------------------

### Initialize RPProvider with PDF Source

Source: https://docs.react-pdf.dev/components/rp-provider

This snippet demonstrates how to use the RPProvider component to load a PDF document. It requires the 'src' prop to specify the PDF file source. Other optional props like 'initialPage' and 'darkMode' can also be configured.

```jsx
import { RPProvider } from '@react-pdf-viewer';

function App() {
  return (
    <RPProvider src="/path/to/your/document.pdf">
      {/* Your PDF viewer components */}
    </RPProvider>
  );
}
```

```tsx
import { RPProvider } from '@react-pdf-viewer';

function App(): JSX.Element {
  return (
    <RPProvider src="/path/to/your/document.pdf" initialPage={2} darkMode={true}>
      {/* Your PDF viewer components */}
    </RPProvider>
  );
}
```

--------------------------------

### React PDF Viewer with Blob Source (JSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Illustrates using the React PDF viewer with a PDF sourced from a Blob object, typically obtained from API responses or file uploads. Includes best practices for managing Blob URLs.

```JSX
import React, { useEffect, useState } from 'react';
import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from 'react-pdf';

function App() {
  const [blobUrl, setBlobUrl] = useState<string | null>(null);

  useEffect(() => {
    // Example: Fetching a PDF and creating a Blob URL
    const fetchPdf = async () => {
      try {
        const response = await fetch('/path/to/local/document.pdf'); // Or from an API
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        setBlobUrl(url);
      } catch (error) {
        console.error('Error fetching PDF:', error);
      }
    };

    fetchPdf();

    // Cleanup function to revoke the Blob URL
    return () => {
      if (blobUrl) {
        URL.revokeObjectURL(blobUrl);
      }
    };
  }, []);

  return (
    <RPConfig>
      {blobUrl ? (
        <RPProvider src={blobUrl}>
          <RPDefaultLayout style={{ width: '100%', height: '500px' }}>
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      ) : (
        <div>Loading PDF...</div>
      )}
    </RPConfig>
  );
}

export default App;
```

--------------------------------

### React PDF Viewer with Internal File Path (Vite/Webpack)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Shows how to reference a PDF file directly from the project's internal file path using React PDF. This method is compatible with bundlers like Vite and Webpack.

```JSX
import React from 'react';
import { RPConfig, RPProvider, RPDefaultLayout, RPPages } from 'react-pdf';

// Assuming 'document.pdf' is in the public folder or imported correctly
// For Vite/Webpack, you might need to import it if not in public folder:
// import documentPdf from './path/to/document.pdf';

function App() {
  // If the PDF is in the public folder, use a relative path
  const internalPdfPath = '/documents/document.pdf'; 
  // Or if imported: const internalPdfPath = documentPdf;

  return (
    <RPConfig>
      <RPProvider src={internalPdfPath}>
        <RPDefaultLayout style={{ width: '100%', height: '500px' }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  );
}

export default App;
```

--------------------------------

### Configure Webpack for React PDF Viewer

Source: https://docs.react-pdf.dev/usage-guide/overriding-dependency

Provides steps to configure Webpack for using React PDF Viewer, including installing 'copy-webpack-plugin' and setting up the 'workerUrl' in the RPConfig component.

```javascript
// webpack.config.js
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // ... other webpack configurations
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "node_modules/pdfjs-dist/build/pdf.worker.min.mjs", to: "pdf.worker.min.mjs" },
      ],
    }),
  ],
  // ...
};

// In your React component:
// import { RPConfig } from '@pdf-viewer/react';
// <RPConfig workerUrl="/pdf.worker.min.mjs" />
```

--------------------------------

### Configure Webpack for PDF Handling

Source: https://docs.react-pdf.dev/introduction/basic-usage

This snippet demonstrates how to configure Webpack to handle PDF files using the file-loader. This ensures that PDF files are processed and served correctly by Webpack.

```JavaScript
module.exports = {
  // ... other configurations
  module: {
    rules: [
      {
        test: /\.pdf$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  }
};
```

--------------------------------

### Customize Toolbar Icons

Source: https://docs.react-pdf.dev/components/rp-default-layout

This example shows how to customize toolbar icons within the RPDefaultLayout component. It illustrates changing the 'openFileIcon' prop to a custom React node, which can be applied to any of the available icons.

```jsx
import React from 'react';
import { RPDefaultLayout, RPIcon } from 'react-pdf-viewer';

const CustomOpenFileIcon = () => <span>Open</span>;

const MyViewer = () => {
  return (
    <RPDefaultLayout
      icons={{
        openFileIcon: <CustomOpenFileIcon />
      }}
    />
  );
};

export default MyViewer;
```

--------------------------------

### Highlight Keywords in PDF using useHighlightContext

Source: https://docs.react-pdf.dev/hooks/use-highlight-context

This snippet demonstrates how to use the `useHighlightContext` hook to highlight keywords in a PDF document. It requires the `highlightColor` to include opacity for visibility and should be used within an `RPProvider`.

```jsx
import React from 'react';
import { useHighlightContext, RPProvider } from 'react-pdf';

const HighlightWords = () => {
  const { highlight, clear } = useHighlightContext();

  const handleHighlight = () => {
    highlight([
      { keyword: 'example', highlightColor: 'rgba(255, 255, 0, 0.5)' },
      { keyword: /pattern/i, highlightColor: 'rgba(0, 255, 0, 0.5)' },
    ]);
  };

  return (
    <div>
      <button onClick={handleHighlight}>Highlight Words</button>
      <button onClick={clear}>Clear Highlights</button>
    </div>
  );
};

const App = () => (
  <RPProvider>
    <HighlightWords />
  </RPProvider>
);
```

```tsx
import React from 'react';
import { useHighlightContext, RPProvider, TextHighlight } from 'react-pdf';

const HighlightWords: React.FC = () => {
  const { highlight, clear } = useHighlightContext();

  const handleHighlight = () => {
    const highlights: TextHighlight[] = [
      { keyword: 'example', highlightColor: 'rgba(255, 255, 0, 0.5)' },
      { keyword: /pattern/i, highlightColor: 'rgba(0, 255, 0, 0.5)' },
    ];
    highlight(highlights);
  };

  return (
    <div>
      <button onClick={handleHighlight}>Highlight Words</button>
      <button onClick={clear}>Clear Highlights</button>
    </div>
  );
};

const App: React.FC = () => (
  <RPProvider>
    <HighlightWords />
  </RPProvider>
);
```

--------------------------------

### Override CSS for Print Preview

Source: https://docs.react-pdf.dev/usage-guide/print-preview-usage

This example demonstrates how to use the `@media print` CSS rule to override problematic styles, such as `overflow: hidden`, ensuring the full content is visible during printing.

```css
/* Example of problematic CSS */
html {
  overflow: hidden;
}

/* Override for print */
@media print {
  html {
    overflow: visible !important;
  }
}
```

--------------------------------

### Next.js Lazy PDF Viewer Wrapper (JSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Shows the JSX code for creating a lazy-loaded wrapper component for the PDF viewer in Next.js, enhancing performance by deferring component loading.

```JSX
import dynamic from 'next/dynamic';

const LazyAppPdfViewer = dynamic(() => import('./AppPdfViewer'), {
  ssr: false,
});

export default LazyAppPdfViewer;
```

--------------------------------

### Configure Download Tool Properties (React)

Source: https://docs.react-pdf.dev/interfaces

The DownloadToolProps interface specifies the properties for the download tool functionality in React PDF. This is configured using the `downloadTool` prop on the `RPSlot` component, providing a function to initiate the PDF download.

```TypeScript
interface DownloadToolProps {
  download: () => void;
}
```

--------------------------------

### Next.js Lazy PDF Viewer Wrapper (TSX)

Source: https://docs.react-pdf.dev/introduction/basic-usage

Provides the TSX code for a lazy-loaded wrapper component in Next.js, optimizing the PDF viewer's initial load time by using dynamic imports.

```TSX
import dynamic from 'next/dynamic';

const LazyAppPdfViewer = dynamic(() => import('./AppPdfViewer'), {
  ssr: false,
});

export default LazyAppPdfViewer;
```

--------------------------------

### Customize RPDefaultLayout Dimensions

Source: https://docs.react-pdf.dev/components/rp-default-layout

This example demonstrates how to override the default height and width of the RPDefaultLayout component. It sets the height to 100% of the parent and the width to a fixed 720px, showcasing the flexibility in dimension configuration.

```jsx
import React from 'react';
import { RPDefaultLayout } from 'react-pdf-viewer';

const MyViewer = () => {
  return (
    <RPDefaultLayout
      style={{
        height: '100%',
        width: '720px'
      }}
    />
  );
};

export default MyViewer;
```

--------------------------------

### MoreOptionsTool Component

Source: https://docs.react-pdf.dev/components/rp-layout

The MoreOptionsTool component displays a menu containing various PDF viewer functions, such as navigating to the first/last page, rotating the document, activating the hand tool, switching between dual page and scrolling modes, and viewing document properties.

```typescript
import { MoreOptionsTool, MoreOptionsProps } from '@react-pdf-viewer/core';

const OptionsMenu: React.FC<MoreOptionsProps> = (props) => (
    <MoreOptionsTool {...props} />
);
```

--------------------------------

### Customize printTool in React-PDF

Source: https://docs.react-pdf.dev/components/rp-layout

Shows how to hide the print tool by setting `printTool` to `false` in the `slots` prop. It also provides an example of implementing a custom print flow by defining `printTool` as a function component.

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        printTool: false // Hides the default print tool
      }
    }}
  />
);

export default App;
```

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const CustomPrintButton = () => (
  <button onClick={() => alert('Custom print flow!')}>Print Document</button>
);

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        printTool: CustomPrintButton // Implements a custom print flow
      }
    }}
  />
);

export default App;
```

--------------------------------

### Dynamic Import for Client-Side Rendering (Next.js)

Source: https://docs.react-pdf.dev/usage-guide/reusable-react-pdf

Explains the necessity of dynamic import with `ssr: false` for the PDF component in Next.js to ensure it runs only on the client side, avoiding server-side rendering issues.

```JSX
import dynamic from 'next/dynamic';

const LazyReactPdfViewer = dynamic(() => import('your-react-pdf-library').then(mod => mod.ReactPdfViewer), {
  ssr: false,
});

const LazyReactPdfViewerConfig = dynamic(() => import('your-react-pdf-library').then(mod => mod.RPConfig), {
  ssr: false,
});

export { LazyReactPdfViewer, LazyReactPdfViewerConfig };
```

```TSX
import dynamic from 'next/dynamic';

const LazyReactPdfViewer = dynamic(() => import('your-react-pdf-library').then(mod => mod.ReactPdfViewer), {
  ssr: false,
});

const LazyReactPdfViewerConfig = dynamic(() => import('your-react-pdf-library').then(mod => mod.RPConfig), {
  ssr: false,
});

export { LazyReactPdfViewer, LazyReactPdfViewerConfig };
```

--------------------------------

### Customize themeSwitcher in React-PDF

Source: https://docs.react-pdf.dev/components/rp-layout

Shows how to hide the theme switcher by setting `themeSwitcher` to `false` in the `slots` prop. It also provides an example of a custom theme switcher component using a toggle with sun and moon icons.

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        themeSwitcher: false // Hides the default theme switcher
      }
    }}
  />
);

export default App;
```

```jsx
import React from 'react';
import { ReactPdf } from '@react-pdf/renderer';

const CustomThemeSwitcher = ({ currentTheme, onToggleTheme }) => (
  <button onClick={onToggleTheme}>
    {currentTheme === 'light' ? '🌙' : '☀️'}
  </button>
);

const App = () => (
  <ReactPdf
    file="/path/to/your/document.pdf"
    options={{
      slots: {
        themeSwitcher: CustomThemeSwitcher // Uses a custom theme switcher component
      }
    }}
  />
);

export default App;
```

--------------------------------

### React PDF: Page Navigation and Pinch to Zoom

Source: https://docs.react-pdf.dev/introduction/changelog

Version 0.7.0 added page navigation capabilities, allowing users to move back and forth between pages. It also introduced a 'pinch to zoom' function for PDF documents, specifically enhancing the experience on desktop views.

```javascript
/*
 * In v0.7.0, page navigation (back/forth) was added.
 * 'Pinch to zoom' functionality was also introduced for desktop views.
 */
// These features are typically integrated into the viewer component.
// No direct code snippet is provided as it's a core viewer functionality.
```

--------------------------------

### Custom Theme Switcher in React-PDF

Source: https://docs.react-pdf.dev/components/rp-default-layout

Implement a custom theme switcher component by providing a function component to the `themeSwitcher` prop within the `slots` object. This example shows a toggle with sun/moon icons based on the theme.

```jsx
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
import { FaSun, FaMoon } from 'react-icons/fa'; // Example icons

function CustomThemeSwitcher({ currentTheme, toggleTheme }) {
  return (
    <button onClick={toggleTheme}>
      {currentTheme === 'light' ? <FaSun /> : <FaMoon />}
    </button>
  );
}

function MyDocument() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <Document
      file="your-document.pdf"
      options={{
        workerSrc: 'path/to/pdf.worker.js',
      }}
      slots={{
        themeSwitcher: (props) => <CustomThemeSwitcher {...props} currentTheme={theme} toggleTheme={toggleTheme} />
      }}
    >
      <Page pageNumber={1} />
    </Document>
  );
}

export default MyDocument;
```

--------------------------------

### Customize Zoom Tool in React PDF

Source: https://docs.react-pdf.dev/customization/customize-toolbar

This example demonstrates how to customize the zoom functionality in the React PDF viewer using the 'zoomTool' slot. It shows how to add custom buttons to zoom in and out, and display the current zoom level.

```jsx
import React, { useState, useCallback } from 'react';
import { RPDefaultLayout, useZoomTool } from '@react-pdf-viewer/core';

const CustomZoomTool = () => {
    const [zoom, setZoom] = useState(1);
    const zoomIn = useCallback(() => setZoom(prevZoom => prevZoom + 0.1), []);
    const zoomOut = useCallback(() => setZoom(prevZoom => Math.max(0.1, prevZoom - 0.1)), []);

    const zoomTool = useZoomTool({
        zoom,
        setZoom,
    });

    return (
        <RPDefaultLayout
            toolbar={(props) => (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <button onClick={zoomOut}>Zoom Out</button>
                    <span>{`${Math.round(zoom * 100)}%`}</span>
                    <button onClick={zoomIn}>Zoom In</button>
                    {props.children}
                </div>
            )}
        />
    );
};

export default CustomZoomTool;
```