### Install React PDF Kit with Bun

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

Installs the React PDF Kit viewer package using the Bun package manager. This command adds the necessary dependency to your project's bun.lockb file and node_modules directory.

```bash
bun add @react-pdf-kit/viewer
```

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

### Install React PDF Kit with yarn

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

Installs the React PDF Kit viewer package using the yarn package manager. This command adds the dependency to your project's package.json and installs it into node_modules.

```bash
yarn add @react-pdf-kit/viewer
```

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

### Install Canvas Dependencies for Apple M Series

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

Installs necessary system dependencies (pkg-config, cairo, pango) using Homebrew for the 'canvas' package, which is required by pdfjs-dist on Apple M series chipsets.

```bash
$ brew install pkg-config cairo pango
```

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

### Install React PDF Kit with pnpm

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

Installs the React PDF Kit viewer package using the pnpm package manager. This command adds the dependency to your project's package.json and installs it into the pnpm store and project node_modules.

```bash
pnpm add @react-pdf-kit/viewer
```

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

### Install React PDF Kit with npm

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

Installs the React PDF Kit viewer package using the npm package manager. This command adds the dependency to your project's package.json and installs it into node_modules.

```bash
npm install @react-pdf-kit/viewer
```

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

### Basic React PDF Viewer Setup (React)

Source: https://docs.react-pdf-kit.dev/components/overview

Demonstrates the recommended basic setup for rendering a PDF document with the default toolbar layout using RPConfig, RPProvider, RPLayout, and RPPages. Requires licenseKey and src props.

```jsx
import { RPConfig, RPProvider, RPLayout, RPPages } from '@react-pdf-kit/viewer'


export default () => (
  <RPConfig licenseKey={...}>
    <RPProvider src={...}>
      <RPLayout toolbar>
        <RPPages />
      </RPLayout>
    </RPProvider>
  </RPConfig>
)
```

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

### Install pdfjs-dist with bun

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

Installs the pdfjs-dist package using bun. This command adds the package to your project's dependencies.

```bash
bun add pdfjs-dist
```

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

### Configure and Render React PDF Viewer

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

This snippet shows the setup for a React PDF viewer using `react-pdf-kit`. It configures the license key, provides the PDF source, and integrates custom elements and layout components for displaying the PDF.

```javascript
export const AppPdfViewer: FC = () => {
      return (
        <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
          <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
            <CustomElement />
            <RPLayout toolbar>
              <RPPages />
            </RPLayout>
          </RPProvider>
        </RPConfig>
      )
    }
```

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

### Install copy-webpack-plugin with bun

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

Installs the 'copy-webpack-plugin' as a development dependency using bun. This plugin is required for Webpack configuration.

```bash
bun add copy-webpack-plugin --dev
```

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

### React PDF Viewer App Setup with Custom Search (React)

Source: https://docs.react-pdf-kit.dev/examples/add-custom-search-bar-on-the-top-bar

The `AppPdfViewerSearch` component sets up the main PDF viewer application. It uses `useRef` to get a reference to a DOM element, `useState` to manage the target element for the custom search component, and `useEffect` to find and prepare a DOM node for the search UI. It configures the `RPLayout` with custom toolbar options and uses `createPortal` to render the `CustomSearch` component into the designated target.

```jsx
import React, { FC, useRef, useState, useEffect } from "react";
import { createPortal } from "react-dom";
import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPHorizontalBar,
  RPVerticalBar,
  RPPages,
} from "react-pdf-kit";
import { CustomSearch } from "./CustomSearch";

export const AppPdfViewerSearch: FC = () => {
  const ref = useRef<HTMLDivElement | null>(null);
  const [target, setTarget] = useState<Element | null>(null);

  useEffect(() => {
    const elemTopBarLeft = ref.current?.querySelector('[data-rp="topBarLeft"]');
    if (elemTopBarLeft) {
      const wrapper = document.createElement("div");
      ref.current = wrapper;

      elemTopBarLeft.prepend(wrapper);
      setTarget(wrapper);
    }
  }, []);

  return (
    <>
      <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <div ref={ref}>
            <RPLayout
              toolbar={{
                topbar: {
                  component: <RPHorizontalBar slots={{ searchTool: false, pageNavigationTool: false }} />,
                },
                leftSidebar: { component: <RPVerticalBar /> },
              }}>
              {target && createPortal(<CustomSearch />, target)}
              <RPPages />
            </RPLayout>
          </div>
        </RPProvider>
      </RPConfig>
    </>
  );
};

```

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

### Install copy-webpack-plugin with pnpm

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

Installs the 'copy-webpack-plugin' as a development dependency using pnpm. This plugin is needed for Webpack setup.

```bash
pnpm install copy-webpack-plugin -D
```

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

### Minimal React PDF Viewer Setup (React)

Source: https://docs.react-pdf-kit.dev/components/overview

Provides a minimal setup for basic PDF rendering without the toolbar and sidebar. It uses RPConfig, RPProvider, and RPPages, requiring a container with defined height and width for proper rendering. Requires licenseKey and src props.

```jsx
import { RPConfig, RPProvider, RPPages } from '@react-pdf-kit/viewer'


export default () => (
  <RPConfig licenseKey={...}>
    <RPProvider src={...}>
      {/* Ensure the container has height and width for proper PDF rendering */}
      <div style={{ height: '600px', width: '768px' }}>
        <RPPages />
      </div>
    </RPProvider>
  </RPConfig>
)
```

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

### Clear Bun Cache and Reinstall Dependencies

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

Commands to clear the Bun cache and reinstall project dependencies. This is often used to resolve installation issues or when overriding package versions, particularly for pdfjs-dist.

```bash
bun pm cache rm
rm bun.lockb
rm -R node_modules
bun i
```

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

### React PDF Viewer Setup with RPProvider

Source: https://docs.react-pdf-kit.dev/examples/jump-to-next-bbox-highlight-area-programmatically

Initializes the React PDF Kit viewer with a PDF source and defines the layout, including a top toolbar and a left sidebar. The `RPProvider` component wraps the entire viewer, making its context available to child components.

```jsx
const AppPdfViewer = () => {
  return (
    <>
      <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <RPLayout
          toolbar={{ topbar: { component: <RPHorizontalBar /> } }}
          leftSidebar={{ component: <MyLeftSidebar /> }}
        >
          <RPPages />
        </RPLayout>
      </RPProvider>
    </>
  );
};

export default AppPdfViewer;
```

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

### Install copy-webpack-plugin with yarn

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

Installs the 'copy-webpack-plugin' as a development dependency using yarn. This is necessary for Webpack configuration.

```bash
yarn add copy-webpack-plugin -D
```

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

### Install pdfjs-dist with pnpm

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

Installs the pdfjs-dist package using pnpm. This command adds the package to your project's dependencies.

```bash
pnpm add pdfjs-dist
```

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

### React PDF Viewer Setup and Text Selection Handling

Source: https://docs.react-pdf-kit.dev/examples/add-custom-action-text-selection

This snippet sets up the main App component, initializes the PDF viewer using RPProvider, and implements text selection logic. It captures mouse up events on the viewer to detect selected text, calculates the position for a dropdown menu relative to the viewer, and manages the visibility of this menu. Dependencies include React hooks and the @react-pdf-kit/viewer library.

```javascript
import { Chat } from "./Chat";
import { useCallback, useEffect, useState } from "react";
import { SelectDropDown } from "./SelectDropDown";
import {
 RPConfig,
 RPProvider,
 RPLayout,
 RPPages,
} from "@react-pdf-kit/viewer";


const App = () => {
 const [pdfViewer, setPdfViewer] = useState<HTMLDivElement | null>();
 const [selectedText, setSelectedText] = useState<string>();
 const [menuPosition, setMenuPosition] = useState<{ x: number; y: number }>({
   x: 0,
   y: 0,
 });
 const [showDropdown, setShowDropdown] = useState<boolean>(false);
 const [context, setContext] = useState<string>();


 const handleMouseUp = useCallback(() => {
   const selection = window.getSelection(); // Get current selection


   // If there is no selection or no range, hide the dropdown and exit
   if (!selection || selection.rangeCount === 0) {
     setShowDropdown(false);
     return;
   }


   const selectedString = selection?.toString(); // Convert to string
   const selectedRange = selection?.getRangeAt(0); // Get the range object


   // Set selected text so we can use it later
   setSelectedText(selectedString);


   // If the selection is empty or only whitespace, hide dropdown
   if (!selectedString || selectedString.trim().length === 0) {
     setShowDropdown(false);
     return;
   }


   // A selection can span multiple lines.
   // getClientRects() returns a DOMRect for each visual line of the selection.
   const rects = selectedRange.getClientRects();
   if (rects.length === 0) return;


   // Use the LAST rectangle so the dropdown appears
   // at the end of the selected text (not the beginning)
   const lastRect = rects[rects.length - 1];


   // Get the bounding rectangle of the PDF viewer container.
   // This allows us to convert from viewport coordinates
   // to container-relative coordinates.
   const containerRect = pdfViewer?.getBoundingClientRect();


   if (containerRect) {
     // Position the dropdown relative to the PDF container
     // right edge + bottom edge of the selected text
     setMenuPosition({
       x: lastRect.right - containerRect.left,
       y: lastRect.bottom - containerRect.top,
     });
     setShowDropdown(true);
   } else {
     setShowDropdown(false);
   }
 }, []);


 const handleAsk = useCallback(() => {
   setContext(selectedText);
   setShowDropdown(false);
 }, [selectedText]);


 const handleCopy = useCallback(() => {
   if (selectedText) {
     window.navigator.clipboard.writeText(selectedText);
   }
   setShowDropdown(false);
 }, [selectedText]);


 useEffect(() => {
   pdfViewer?.addEventListener("mouseup", handleMouseUp);


   return () => {
     pdfViewer?.removeEventListener("mouseup", handleMouseUp);
   };
 }, [handleMouseUp, pdfViewer]);


 return (
   <>
     <div className="grid grid-cols-3 gap-2">
       <div className="col-span-2 relative">
         <RPConfig licenseKey="YOUR_LICENSE_KEY">
         <div ref={setPdfViewer}>
           <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
             <RPLayout toolbar style={{ height: "600px" }}>
               <RPPages />
             </RPLayout>
           </RPProvider>
         </div>
         </RPConfig>
         <SelectDropDown
           position={menuPosition}
           show={showDropdown}
           onAsk={handleAsk}
           onCopy={handleCopy}
         />
       </div>
       <div className="col-span-1">
         <Chat
           context={context}
           onClearContext={() => setContext(undefined)}
         />
       </div>
     </div>
   </>
 );
};


export default App;

```

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

### Basic PDF Viewer Setup with React PDF Kit - React

Source: https://docs.react-pdf-kit.dev/examples/jump-to-next-bbox-highlight-area-programmatically

Sets up a basic PDF viewer using React PDF Kit's `RPProvider` and `RPLayout`. It configures a horizontal toolbar and a custom left sidebar component (`MyLeftSidebar`) to display the PDF content.

```jsx
const AppPdfViewer: FC = () => {
  return (
    <>
      <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <RPLayout
          toolbar={{
            topbar: { component: <RPHorizontalBar /> },
            leftSidebar: { component: <MyLeftSidebar /> },
          }}
        >
          <RPPages />
        </RPLayout>
      </RPProvider>
    </>
  );
};

export default AppPdfViewer;
```

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

### Install pdfjs-dist with npm

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

Installs the pdfjs-dist package using npm. This is the first step in overriding the default version required by React PDF Kit.

```bash
npm install pdfjs-dist --save
```

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

### Install pdfjs-dist with yarn

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

Installs the pdfjs-dist package using yarn. This command is used to add the package to your project dependencies.

```bash
yarn add pdfjs-dist
```

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

### Full React PDF Viewer with Top Bar Button (JSX)

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

This complete JSX example integrates the creation of a button element, its prepending to the top bar's right section, and its cleanup using React hooks (`useRef`, `useCallback`, `useMemo`). It sets up the `RPLayout` with a ref and event handlers for `onLoaded` and `cleanupOnLoaded`.

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

### Basic RPButton with Icon (React)

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

Demonstrates the basic usage of the RPButton component with an SVG icon. This example shows how to import and render a simple icon button.

```javascript
import { RPButton } from '@react-pdf-kit/viewer'


export const MyComponent = () => {
  return (
    <RPButton onClick={() => console.log('Button clicked')}> 
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 10L4 6h8L8 10z" />
      </svg>
    </RPButton>
  )
}
```

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

### Setup Hyperlink Detection with useEffect (JSX/TSX)

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

This snippet demonstrates how to use the `useEffect` hook in React to set up and tear down an event listener for detecting clicks on hyperlinks within the PDF viewer. It calls a `setupHyperlinkDetection` function and ensures proper cleanup by returning its result from the effect.

```jsx
useEffect(() => {
  const cleanup = setupHyperlinkDetection()
  return typeof cleanup === 'function' ? cleanup : undefined
}, [setupHyperlinkDetection])
```

```tsx
useEffect(() => {
  return setupHyperlinkDetection()
}, [setupHyperlinkDetection])
```

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

### Install copy-webpack-plugin with npm

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

Installs the 'copy-webpack-plugin' as a development dependency using npm. This plugin is required for configuring Webpack to handle the PDF worker file.

```bash
npm install copy-webpack-plugin --save-dev
```

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

### Basic Usage of React PDF Kit Hooks

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

Demonstrates how to use common React PDF Kit hooks such as usePaginationContext and useFullScreenContext within a custom React component. This example requires the component to be a child of RPProvider and assumes the necessary imports from '@react-pdf-kit/viewer'. It showcases accessing pagination details, controlling page navigation, and toggling fullscreen mode.

```jsx
import type { FC } from 'react'
import {
  RPConfig,
  RPProvider,
  RPPages,
  usePaginationContext,
  useFullScreenContext,
  RPLayout
} from '@react-pdf-kit/viewer'


const CustomPdfViewer: FC = () => {
  const { focusedPage, totalPages, nextPage, prevPage } = usePaginationContext()
  const { isFullScreen, toggleFullScreen } = useFullScreenContext()
  return (
    <>
      <p>
        Page {focusedPage} of {totalPages}
      </p>
      <button onClick={prevPage}>Previous</button>
      <button onClick={nextPage}>Next</button>
      <div>
        <button onClick={toggleFullScreen}>
          {isFullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
        </button>
      </div>
    </>
  )
}


const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <CustomPdfViewer />
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  )
}
export default AppPdfViewer

```

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

### Full React PDF Viewer with Top Bar Button (TSX)

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

This complete TSX example integrates the creation of a button element, its prepending to the top bar's right section, and its cleanup using React hooks (`useRef`, `useCallback`, `useMemo`). It sets up the `RPLayout` with a ref and event handlers for `onLoaded` and `cleanupOnLoaded`, including type annotations for the ref.

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

### Example Usage of LazyAppPdfViewer in Next.js Page

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

Demonstrates how to import and use the `LazyAppPdfViewer` component within a Next.js page. It shows how to pass a PDF source URL to the component.

```jsx
import LazyAppPdfViewer from './components/LazyAppPdfViewer'


export default function Page() {
  const pdfSrc = 'https://cdn.codetoweb.com/image/upload/v1721763853/guides/web-roadmap.pdf';
  return <LazyAppPdfViewer pdfSrc={pdfSrc} />
}

```

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

### Vite Configuration for PDF Worker

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

Configures Vite's 'optimizeDeps.include' to ensure 'pdfjs-dist' is pre-bundled. This is a necessary step for using 'pdfjs-dist' with Vite.

```javascript
import { defineConfig } from 'vite'


export default defineConfig({
  // ...config
  optimizeDeps: {
    include: ['pdfjs-dist']
    // ...
  }
})
```

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

### Implement Single Page Rotation with React PDF Kit (TSX)

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

This TypeScript example demonstrates page rotation using React PDF Kit's context hooks. It's functionally equivalent to the JSX version but uses TypeScript syntax. Ensure RPProvider is used to provide the necessary context for hooks like usePageRotateContext.

```tsx
import { useCallback, useEffect, FC } from 'react'
import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
  usePageRotateContext,
  usePaginationContext,
  useElementPageContext
} from '@react-pdf-kit/viewer'


const CounterClockwiseIcon = () => {
  return (
    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M7.59664 2.93628C7.76085 3.06401 8.00012 2.94698 8.00012 2.73895V1.99998C9.98143 2 11.1848 2.3637 11.9105 3.08945C12.6363 3.81522 13 5.0186 13 6.99998C13 7.27613 13.2239 7.49998 13.5 7.49998C13.7761 7.49998 14 7.27613 14 6.99998C14 4.9438 13.6325 3.39719 12.6176 2.38234C11.6028 1.36752 10.0562 0.999999 8.00012 0.999984V0.261266C8.00012 0.0532293 7.76085 -0.0637944 7.59664 0.063928L6.00384 1.30277C5.87516 1.40286 5.87516 1.59735 6.00384 1.69744L7.59664 2.93628ZM9.5 5H2.5C2.22386 5 2 5.22386 2 5.5V12.5C2 12.7761 2.22386 13 2.5 13H9.5C9.77614 13 10 12.7761 10 12.5V5.5C10 5.22386 9.77614 5 9.5 5ZM2.5 4C1.67157 4 1 4.67157 1 5.5V12.5C1 13.3284 1.67157 14 2.5 14H9.5C10.3284 14 11 13.3284 11 12.5V5.5C11 4.67157 10.3284 4 9.5 4H2.5Z"
        fill="currentColor"
        fillRule="evenodd"
      ></path>
    </svg>
  )
}


const SinglePageRotate: FC = () => {
  const { rotate } = usePageRotateContext()
  const { totalPages } = usePaginationContext()
  const { updateElement, clearElements } = useElementPageContext()


  const handleRotate = useCallback(
    (page: number, direction: 'clockwise' | 'counterclockwise') => {
      switch (direction) {
        case 'clockwise':
          rotate(page, (prev) => (prev + 90) % 360)
          break
        case 'counterclockwise':
          rotate(page, (prev) => (prev - 90 + 360) % 360)
          break
      }
    },
    [rotate]
  )


  useEffect(() => {
    Array.from({ length: totalPages }).forEach((_, index) => {
      updateElement(index + 1, () => {
        return [
          <div style={{ display: 'flex', position: 'absolute', top: '0', left: '100%' }}>
            <div
              style={{ cursor: 'pointer', transform: 'rotateY(180deg)' }}
              onClick={() => handleRotate(index + 1, 'clockwise')}
            >
              <CounterClockwiseIcon />
            </div>
            <div
              style={{ cursor: 'pointer', marginLeft: '10px' }}
              onClick={() => handleRotate(index + 1, 'counterclockwise')}
            >
              <CounterClockwiseIcon />
            </div>
          </div>
        ]
      })
    })


    return () => {
      Array.from({ length: totalPages }).forEach((_, index) => {
        clearElements(index + 1)
      })
    }
  }, [clearElements, updateElement, handleRotate, totalPages])


  return null
}


export const AppPdfViewer: FC = () => {
  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <SinglePageRotate />
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  )
}

```

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

### Custom Theme React PDF Viewer Setup (React)

Source: https://docs.react-pdf-kit.dev/components/overview

Shows how to customize the appearance of the React PDF viewer while maintaining the default layout. It utilizes RPTheme with customVariables to override CSS properties like toolbar background and text color. Requires licenseKey and src props.

```jsx
import { RPConfig, RPTheme, RPProvider, RPLayout, RPPages } from '@react-pdf-kit/viewer'


export default () => (
  <RPConfig licenseKey={...}>
    <RPTheme
      customVariables={{
        '--rp-toolbar-background': 'red',
        '--rp-text-color': 'yellow'
      }}
    >
      <RPProvider src={...}>
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPTheme>
  </RPConfig>
)
```

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

### Initialize State for Dropdown and Link in JSX

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

Initializes state variables to manage the visibility and position of a custom dropdown menu and to store the hyperlink's href. This is a basic setup for managing UI state in a React component.

```jsx
const [dropdown, setDropdown] = useState(null)
```

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

### Toggle RPButton with Active State (React)

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

Shows how to implement a toggle button using the `active` prop of RPButton. This example uses React's `useState` hook to manage the active state and visually indicate it.

```javascript
import { useState } from 'react'
import { RPButton } from '@react-pdf-kit/viewer'


export const ToggleButton = () => {
  const [isActive, setIsActive] = useState(false)


  return (
    <RPButton active={isActive} onClick={() => setIsActive(!isActive)}>
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 2L2 8l6 6 6-6-6-6z" />
      </svg>
    </RPButton>
  )
}
```

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

### Implement Single Page Rotation with React PDF Kit (JSX)

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

This example shows how to create a SinglePageRotate component using the usePageRotateContext hook to handle page rotation. It requires RPProvider as a parent component and utilizes hooks like usePaginationContext and useElementPageContext for managing page elements and total pages. The component adds rotation controls to each page.

```jsx
import { useCallback, useEffect } from 'react'
import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
  usePageRotateContext,
  usePaginationContext,
  useElementPageContext
} from '@react-pdf-kit/viewer'


const CounterClockwiseIcon = () => {
  return (
    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M7.59664 2.93628C7.76085 3.06401 8.00012 2.94698 8.00012 2.73895V1.99998C9.98143 2 11.1848 2.3637 11.9105 3.08945C12.6363 3.81522 13 5.0186 13 6.99998C13 7.27613 13.2239 7.49998 13.5 7.49998C13.7761 7.49998 14 7.27613 14 6.99998C14 4.9438 13.6325 3.39719 12.6176 2.38234C11.6028 1.36752 10.0562 0.999999 8.00012 0.999984V0.261266C8.00012 0.0532293 7.76085 -0.0637944 7.59664 0.063928L6.00384 1.30277C5.87516 1.40286 5.87516 1.59735 6.00384 1.69744L7.59664 2.93628ZM9.5 5H2.5C2.22386 5 2 5.22386 2 5.5V12.5C2 12.7761 2.22386 13 2.5 13H9.5C9.77614 13 10 12.7761 10 12.5V5.5C10 5.22386 9.77614 5 9.5 5ZM2.5 4C1.67157 4 1 4.67157 1 5.5V12.5C1 13.3284 1.67157 14 2.5 14H9.5C10.3284 14 11 13.3284 11 12.5V5.5C11 4.67157 10.3284 4 9.5 4H2.5Z"
            fill="currentColor"
            fillRule="evenodd"
            clipRule="evenodd"
          ></path>
        </svg>
      )
    }


    const SinglePageRotate = () => {
      const { rotate } = usePageRotateContext()
      const { totalPages } = usePaginationContext()
      const { updateElement, clearElements } = useElementPageContext()


      const handleRotate = useCallback(
        (page, direction) => {
          switch (direction) {
            case 'clockwise':
              rotate(page, (prev) => (prev + 90) % 360)
              break
            case 'counterclockwise':
              rotate(page, (prev) => (prev - 90 + 360) % 360)
              break
          }
        },
        [rotate]
      )


      useEffect(() => {
        Array.from({ length: totalPages }).forEach((_, index) => {
          updateElement(index + 1, () => {
            return [
              <div style={{ display: 'flex', position: 'absolute', top: '0', left: '100%' }}>
                <div
                  style={{ cursor: 'pointer', transform: 'rotateY(180deg)' }}
                  onClick={() => handleRotate(index + 1, 'clockwise')}
                >
                  <CounterClockwiseIcon />
                </div>
                <div
                  style={{ cursor: 'pointer', marginLeft: '10px' }}
                  onClick={() => handleRotate(index + 1, 'counterclockwise')}
                >
                  <CounterClockwiseIcon />
                </div>
              </div>
            ]
          })
        })


        return () => {
          Array.from({ length: totalPages }).forEach((_, index) => {
            clearElements(index + 1)
          })
        }
      }, [clearElements, updateElement, handleRotate, totalPages])


      return null
    }


    export const AppPdfViewer = () => {
      return (
        <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
          <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
            <SinglePageRotate />
            <RPLayout toolbar>
              <RPPages />
            </RPLayout>
          </RPProvider>
        </RPConfig>
      )
    }

```

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

### Customize Download Tool in RPHorizontalBar with Custom Component

Source: https://docs.react-pdf-kit.dev/components/rp-horizontal-bar

Illustrates how to replace the default file download button in RPHorizontalBar with a custom React component. This example adds a confirmation dialog before initiating the download, providing a more controlled user experience.

```jsx
<RPLayout
  toolbar={{
    topbar: {{
      component: (
        <RPHorizontalBar
          slots={{
            downloadTool: ({ download }) => (
              <div
                onClick={() => {
                  // Show a confirm alert before downloading
                  if (confirm('confirm download')) {
                    download()
                  }
                }}
              >
                Download File
              </div>
            )
          }}
        />
      )
    }}
  }}
>

```

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

### Configure Custom Horizontal Toolbar in React PDF Viewer (JSX)

Source: https://docs.react-pdf-kit.dev/examples/customize-a-search-popover

This example demonstrates how to configure the custom horizontal toolbar component within the React PDF Viewer using JSX. It utilizes `RPConfig`, `RPProvider`, and `RPLayout` components. The `CustomHorizontalBar` is passed as the `component` for the `topbar` within the `toolbar` configuration.

```jsx
import {
 RPLayout,
 RPPages,
 RPProvider,
 RPVerticalBar,
 RPConfig,
} from "@react-pdf-kit/viewer";
import { CustomHorizontalBar } from "./CustomHorizontalBar";


const App = () => {
 return (
   <div>
     <RPConfig>
       <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
         <div>
           <RPLayout
             toolbar={{ 
               topbar: { component: <CustomHorizontalBar /> },
               leftSidebar: { component: <RPVerticalBar /> },
             }}
           >
             <RPPages />
           </RPLayout>
         </div>
       </RPProvider>
     </RPConfig>
   </div>
 );
};


export default App

```

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

### Set Initial Search Keyword in React PDF Viewer (TSX)

Source: https://docs.react-pdf-kit.dev/examples/set-an-initial-keyword-search

This TypeScript example demonstrates setting the `initialSearch` prop on the RPProvider component to automatically find and highlight a keyword ('TraceMonkey') upon PDF loading. It utilizes the `@react-pdf-kit/viewer` library and necessitates a license key for operation.

```tsx
import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
} from "@react-pdf-kit/viewer";
import React, { type FC } from "react";


export const AppPdfViewer : FC = () => {
  return (
    <>
    <h1>Initial search</h1>
      <RPConfig  licenseKey="YOUR_DOMAIN_TOKEN">
        <RPProvider
          // The keyword to search for when the PDF loads
          initialSearch="TraceMonkey"
          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
          <RPLayout toolbar>
            <RPPages/>
          </RPLayout>
        </RPProvider>
      </RPConfig>
    </>
  );
};

```

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

### Custom Download Tool in React PDF Viewer

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

To use a custom file download component in React PDF, define `downloadTool` as a function component in the `slots`. This example adds a confirmation flow before initiating the download process, providing a more controlled user experience.

```javascript
import { RPProvider, RPDefaultLayout, RPPages, RPConfig } from '@react-pdf-kit/viewer'


export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout
          slots={{
            downloadTool: ({ download }) => (
              <div
                onClick={() => {
                  // Show a confirm alert before downloading
                  if (confirm('confirm download')) {
                    download()
                  }
                }}
              >
                Download File
              </div>
            )
          }}
        >
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </RPConfig>
  )
}
```

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

### React: PDF Viewer with Hyperlink Detection

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

A React component that integrates with React-PDF-Kit to display a PDF document and enables custom handling of hyperlink clicks. It uses `useRef` to get a reference to the viewer container and `useState` to manage the state of a custom dropdown menu. `useEffect` is used to set up and clean up the event listener for hyperlink detection.

```typescript
import React, { useRef, useState, useCallback, useEffect } from "react";
import { Provider as RPProvider, Layout as RPLayout, Pages as RPPages } from "react-pdf-kit";
import HyperlinkDropdown from "./HyperlinkDropdown"; // Assuming HyperlinkDropdown is in the same directory

interface DropdownPosition {
  href: string;
  x: number;
  y: number;
}

const AppPdfViewer: React.FC = () => {
  // Reference to the viewer container
  const containerRef = useRef<HTMLDivElement | null>(null);

  // State for the hyperlink dropdown
  const [dropdown, setDropdown] = useState<DropdownPosition | null>(null);

  const closeDropdown = useCallback(() => setDropdown(null), []);

  const setupHyperlinkDetection = useCallback((): (() => void) | undefined => {
    const root = containerRef.current;
    if (!root) return;

    const onRootClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement | null;
      if (!target) return;

      // Check if the clicked element is a hyperlink inside PDF layers
      const anchor = target.closest<HTMLAnchorElement>("a[href]");
      if (!anchor || !root.contains(anchor)) return;

      const layer = anchor.closest(
        '[data-rp*="textLayer"], [data-rp*="annotationLayer"]'
      );
      if (!layer) return;

      // Exclusion: skip when href is empty
      const hrefAttr = anchor.getAttribute("href") || "";
      if (hrefAttr === "") {
        return;
      }

      // Prevent default link behavior and show custom dropdown
      e.preventDefault();
      e.stopPropagation();

      const rect = anchor.getBoundingClientRect();
      setDropdown({
        href: anchor.href,
        x: rect.left + window.scrollX,
        y: rect.bottom + window.scrollY + 5,
      });
    };

    // Capture clicks inside the viewer
    root.addEventListener("click", onRootClick, true);
    return () => {
      root.removeEventListener("click", onRootClick, true);
    };
  }, []);

  useEffect(() => {
    return setupHyperlinkDetection();
  }, [setupHyperlinkDetection]);

  return (
    <div ref={containerRef}>
      {/* PDF Viewer */}
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPLayout toolbar style={{ width: "100%", height: "600px" }}>
          <RPPages />
        </RPLayout>
      </RPProvider>

      {/* Custom dropdown menu when clicking a hyperlink */}
      {dropdown && (
        <HyperlinkDropdown dropdown={dropdown} onClose={closeDropdown} />
      )}
    </div>
  );
};

export default AppPdfViewer;

```

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

### Configure RPLayout Dimensions and Toolbar - React

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

This React code snippet demonstrates how to configure the dimensions (height and width) and enable the default toolbar for the RPLayout component. It utilizes RPConfig, RPProvider, RPLayout, and RPPages from '@react-pdf-kit/viewer'. The example overrides default dimensions and ensures the toolbar is visible.

```javascript
import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
} from "@react-pdf-kit/viewer";


// Example of a parent component
const ParentComponent = ({ children }) => {
  return <div style={{ height: "500px" }}>{children}</div>;
};


const AppPdfViewer = () => {
  return (
    <ParentComponent>
      <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
        <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
          <RPLayout
            // Override the default height and width
            style={{ height: "100%", width: "720px" }}
            // Show toolbar by Topbar and Left sidebar by default
            toolbar
          >
            <RPPages />
          </RPLayout>
        </RPProvider>
      </RPConfig>
    </ParentComponent>
  );
};


export default AppPdfViewer;

```

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

### Override pdfjs-dist version in package.json (npm/bun/pnpm)

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

Specifies an override for the 'pdfjs-dist' version in your package.json file. This ensures that the specific installed version is used by your project.

```json
{
  "overrides": {
    "pdfjs-dist": "the installed version"
  }
}
```

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

### Configure Webpack for PDF.js in Next.js (v14)

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

This configuration is for Next.js v14 using Webpack. It modifies the webpack configuration to correctly resolve the pdfjs-dist module. This is a workaround for compatibility issues with `@react-pdf-kit/viewer@^2.0.0` and Next.js v14. Ensure Step 1 of pdfjs-dist installation is completed.

```javascript
const path = require('path')


/** @type {import('next').NextConfig} */
const nextConfig = {
  // Config options here
  webpack: (config, { webpack }) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/^pdfjs-dist$/, (resource) => {
        resource.request = path.join(__dirname, './node_modules/pdfjs-dist/webpack')
      })
    )
    return config
  }
}


module.exports = nextConfig;

```

```typescript
import { NextConfig } from "next";
import path from 'path';


const nextConfig: NextConfig = {
  /* config options here */
  webpack: (config, { webpack }) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/^pdfjs-dist$/, (resource: any) => {
        resource.request = path.join(__dirname, './node_modules/pdfjs-dist/webpack')
      })
    )
    return config
  }
};


export default nextConfig;

```

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

### Configure PDF Worker URL in Next.js (v15+) with Turbopack

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

This snippet shows how to configure the PDF worker URL for React PDF Kit in Next.js v15 and later using Turbopack. It involves adding the worker URL to the RPConfig component's workerUrl prop. Ensure Step 1 of pdfjs-dist installation is completed prior to this.

```jsx
import { RPConfig } from '@react-pdf-kit/viewer'
import React from 'react'


const workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  import.meta.url,
).toString();


function AppProviders({ children, ...props }) {
    return (
      <RPConfig workerUrl={workerSrc} {...props}>
        {children}
      </RPConfig>
    )
}


export default AppProviders

```

```tsx
import { RPConfig, RPConfigProps } from '@react-pdf-kit/viewer'
import React from 'react'
import { type PropsWithChildren } from 'react'


const workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  import.meta.url,
).toString();


function AppProviders({ children, ...props }: PropsWithChildren<Omit<RPConfigProps, 'workerUrl'>>) {
    return (
      <RPConfig workerUrl={workerSrc} {...props}>
        {children}
      </RPConfig>
    )
}


export default AppProviders

```

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

### Configure and Render PDF Viewer with Highlights (React/TypeScript)

Source: https://docs.react-pdf-kit.dev/examples/highlight-with-bbox-coordinates-programmatically

The `AppPdfViewer` component sets up the React PDF Kit environment, including configuration, provider, and layout. It integrates the `BboxHighlightLayer` to display highlights on the PDF document. This component requires a license key and a source URL for the PDF file.

```typescript
import React, { FC } from "react";
import { RPConfig, RPProvider, RPLayout, RPPages } from "@react-pdf-kit/core";
import BboxHighlightLayer from "./BboxHighlightLayer"; // Assuming BboxHighlightLayer is in the same directory

export const AppPdfViewer: FC = () => {
  return (
    <>
      <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
        <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
          <BboxHighlightLayer />
          <RPLayout toolbar>
            <RPPages />
          </RPLayout>
        </RPProvider>
      </RPConfig>
    </>
  );
};

export default AppPdfViewer;
```