### Install react-pdf-cropper using npm or yarn

Source: https://github.com/shivam27k/react-pdf-cropper/blob/main/README.md

This snippet shows how to install the react-pdf-cropper package using either npm or yarn. These commands are essential for adding the library to your project's dependencies.

```bash
npm install react-pdf-cropper
# or
yarn add react-pdf-cropper
```

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

### React PDF Cropper Quick Example with react-pdf-viewer

Source: https://github.com/shivam27k/react-pdf-cropper/blob/main/README.md

Demonstrates integrating react-pdf-cropper with react-pdf-viewer to allow users to crop regions of a PDF. It shows how to manage cropping state, handle crop results, and use custom buttons for controlling the cropping process.

```javascript
import React, { useRef, useState, useCallback } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import PDFCropperOverlay, { handleDownload, CropPreviewButton, CancelCropButton } from "react-pdf-cropper";
import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";

function App() {
  const containerRef = useRef();
  const [pdfFile, setPdfFile] = useState("/sample.pdf");
  const [croppedImage, setCroppedImage] = useState(null);
  const [page, setPage] = useState(1);
  const [isCropping, setIsCropping] = useState(false);
  const [handlers, setHandlers] = useState({});

  // Cropper overlay gives you crop/cancel handlers for your own buttons
  const getHandlers = useCallback((handlers) => setHandlers(handlers), []);

  return (
    <div>
      <button onClick={() => setIsCropping(true)} disabled={isCropping}>
        Start Cropping
      </button>
      {isCropping && (
        <>
          <CancelCropButton onClick={handlers.stopCropping} />
          <CropPreviewButton onClick={handlers.handleSaveClick} />
        </>
      )}
      <div ref={containerRef} style={{ position: "relative", width: 800, height: 900 }}>
        <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
          <Viewer
            fileUrl={pdfFile}
            plugins={[defaultLayoutPlugin()]} 
            onPageChange={e => setPage(e.currentPage + 1)}
          />
        </Worker>
        <PDFCropperOverlay
          containerRef={containerRef}
          isCropping={isCropping}
          setIsCropping={setIsCropping}
          currentPage={page}
          onCrop={setCroppedImage}
          getHandlers={getHandlers}
          showDefaultButtons={false}  // Use your own buttons!
        />
      </div>
      {croppedImage && (
        <>
          <img src={croppedImage} alt="Cropped" style={{ maxWidth: 400, border: "1px solid #ddd" }} />
          <button onClick={() => handleDownload(croppedImage)}>
            Download Cropped Image
          </button>
        </>
      )}
    </div>
  );
}

export default App;

```

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

### PDFCropperOverlay Component API

Source: https://github.com/shivam27k/react-pdf-cropper/blob/main/README.md

Details the props available for the PDFCropperOverlay component, which is the core component for enabling PDF cropping functionality.

```APIDOC
## PDFCropperOverlay Component API

### Description
This component provides the UI and functionality for cropping regions of a PDF displayed within a React application. It integrates with PDF rendering libraries and allows for customization of the cropping experience.

### Props

#### `containerRef`
- **Type**: `ref`
- **Required**: Yes
- **Description**: A ref to the DOM element that contains the PDF page canvas where cropping will occur.

#### `isCropping`
- **Type**: `boolean`
- **Required**: Yes
- **Description**: Controls whether the cropping overlay is active. This is a controlled prop managed by the parent component.

#### `setIsCropping`
- **Type**: `function`
- **Required**: Yes
- **Description**: A function provided by the parent component to update the `isCropping` state, typically used to close the cropping overlay after an action (e.g., after cropping or canceling).

#### `currentPage`
- **Type**: `number`
- **Required**: Yes
- **Description**: The current page number being displayed and cropped (1-based index).

#### `onCrop`
- **Type**: `function`
- **Required**: No
- **Description**: A callback function that is invoked with the cropped image data URL when a crop operation is completed. The function receives the data URL as its argument: `(dataUrl) => {}`.

#### `getHandlers`
- **Type**: `function`
- **Required**: No
- **Description**: A callback function that provides access to internal handlers for managing the cropping process. It receives an object containing `handleSaveClick` and `stopCropping` functions: `({ handleSaveClick, stopCropping }) => {}`.

#### `watermarkImage`
- **Type**: `string`
- **Required**: No
- **Description**: An optional URL or data URL of an image to be used as a watermark on the cropped output.

#### `watermarkProps`
- **Type**: `object`
- **Required**: No
- **Description**: Optional properties to configure the watermark's appearance, such as `{ opacity, tileWidth, tileHeight }` for tiling effects.

#### `showDefaultButtons`
- **Type**: `boolean`
- **Required**: No
- **Default**: `true`
- **Description**: Determines whether the default crop and cancel buttons are displayed within the cropping UI. Set to `false` to use custom buttons via `getHandlers`.
```

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

### PDFCropperOverlay Component Integration with React PDF Viewer

Source: https://context7.com/shivam27k/react-pdf-cropper/llms.txt

Demonstrates how to integrate the PDFCropperOverlay component to enable cropping on a PDF rendered by @react-pdf-viewer. It sets up the viewer, manages cropping state, and displays the cropped image. Requires @react-pdf-viewer and pdf.js.

```jsx
import React, { useRef, useState, useCallback } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import PDFCropperOverlay from "react-pdf-cropper";
import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";

function PDFEditor() {
  const containerRef = useRef();
  const [pdfFile, setPdfFile] = useState("/sample.pdf");
  const [croppedImage, setCroppedImage] = useState(null);
  const [page, setPage] = useState(1);
  const [isCropping, setIsCropping] = useState(false);
  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  return (
    <div>
      <button onClick={() => setIsCropping(true)} disabled={isCropping}>
        Start Cropping
      </button>

      <div ref={containerRef} style={{ position: "relative", width: 800, height: 900 }}>
        <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
          <Viewer
            fileUrl={pdfFile}
            plugins={[defaultLayoutPluginInstance]}
            onPageChange={e => setPage(e.currentPage + 1)}
          />
        </Worker>

        <PDFCropperOverlay
          containerRef={containerRef}
          isCropping={isCropping}
          setIsCropping={setIsCropping}
          currentPage={page}
          onCrop={setCroppedImage}
        />
      </div>

      {croppedImage && (
        <img
          src={croppedImage}
          alt="Cropped region"
          style={{ maxWidth: 400, border: "1px solid #ddd" }}
        />
      )}
    </div>
  );
}

export default PDFEditor;

```

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

### Advanced PDF Cropping Control with Callbacks (React)

Source: https://context7.com/shivam27k/react-pdf-cropper/llms.txt

This React component demonstrates how to programmatically control PDF cropping using the react-pdf-cropper library. It manages cropping state, handles crop completion callbacks, saves cropped images, and displays a gallery of cropped images. Dependencies include React, @react-pdf-viewer/core, and react-pdf-cropper. It takes a PDF file as input and outputs cropped image data URLs.

```jsx
import React, { useState, useRef, useCallback, useEffect } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import PDFCropperOverlay from "react-pdf-cropper";
import "@react-pdf-viewer/core/lib/styles/index.css";

function AdvancedCropControl() {
  const containerRef = useRef();
  const [pdfFile] = useState("/report.pdf");
  const [croppedImages, setCroppedImages] = useState([]);
  const [page, setPage] = useState(1);
  const [isCropping, setIsCropping] = useState(false);
  const [cropHistory, setCropHistory] = useState([]);

  const handleCrop = useCallback((dataUrl) => {
    const timestamp = new Date().toISOString();
    const cropData = {
      id: Date.now(),
      dataUrl,
      page,
      timestamp,
      filename: `crop-page${page}-${Date.now()}.png`
    };

    setCroppedImages(prev => [...prev, cropData]);
    setCropHistory(prev => [...prev, {
      action: "crop",
      page,
      timestamp
    }]);

    console.log("Crop completed:", cropData);

    // Auto-save to backend
    saveCropToServer(cropData);
  }, [page]);

  const saveCropToServer = async (cropData) => {
    try {
      const response = await fetch("/api/crops", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          page: cropData.page,
          image: cropData.dataUrl,
          filename: cropData.filename
        })
      });
      if (response.ok) {
        console.log("Saved to server successfully");
      }
    } catch (error) {
      console.error("Failed to save:", error);
    }
  };

  const deleteCrop = (id) => {
    setCroppedImages(prev => prev.filter(crop => crop.id !== id));
  };

  useEffect(() => {
    // Auto-enable cropping when navigating to specific pages
    if (page === 3 || page === 5) {
      setIsCropping(true);
    }
  }, [page]);

  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <div style={{ flex: 1 }}>
        <div style={{ marginBottom: "1rem" }}>
          <button
            onClick={() => setIsCropping(!isCropping)}
            style={{
              padding: "10px 20px",
              background: isCropping ? "#dc3545" : "#007bff",
              color: "#fff",
              border: "none"
            }}
          >
            {isCropping ? "Disable Cropping" : "Enable Cropping"}
          </button>
          <span style={{ marginLeft: "1rem" }}>
            Current Page: {page} | Crops: {croppedImages.length}
          </span>
        </div>

        <div ref={containerRef} style={{ position: "relative", width: 700, height: 800 }}>
          <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
            <Viewer
              fileUrl={pdfFile}
              onPageChange={e => setPage(e.currentPage + 1)}
            />
          </Worker>

          <PDFCropperOverlay
            containerRef={containerRef}
            isCropping={isCropping}
            setIsCropping={setIsCropping}
            currentPage={page}
            onCrop={handleCrop}
          />
        </div>
      </div>

      <div style={{ width: 300, padding: "1rem", background: "#f8f9fa", overflowY: "auto" }}>
        <h3>Crop Gallery ({croppedImages.length})</h3>
        {croppedImages.map(crop => (
          <div key={crop.id} style={{ marginBottom: "1rem", padding: "0.5rem", background: "#fff" }}>
            <img src={crop.dataUrl} alt={crop.filename} style={{ width: "100%" }} />
            <p style={{ fontSize: "0.85rem", margin: "0.5rem 0" }}>
              Page {crop.page} | {new Date(crop.timestamp).toLocaleTimeString()}
            </p>
            <button
              onClick={() => deleteCrop(crop.id)}
              style={{ padding: "4px 8px", background: "#dc3545", color: "#fff", border: "none" }}
            >
              Delete
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default AdvancedCropControl;

```

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

### Downloading Cropped Images with handleDownload

Source: https://github.com/shivam27k/react-pdf-cropper/blob/main/README.md

The handleDownload utility function allows for immediate download of the cropped PDF image. It takes the image data URL and an optional filename as arguments. The default filename is 'cropped-image.png'.

```javascript
import { handleDownload } from 'react-pdf-cropper';

// Assuming imageDataUrl is obtained after cropping
const imageDataUrl = 'data:image/png;base64,...';

handleDownload(imageDataUrl, 'my-custom-filename.png');
// Or using the default filename:
handleDownload(imageDataUrl);
```

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

### Customizing Cropper with External UI and Watermarks in React

Source: https://github.com/shivam27k/react-pdf-cropper/blob/main/README.md

Hide default buttons by passing showDefaultButtons={false} and utilize external UI components. Add watermarks by providing a watermarkImage prop and optionally configuring watermarkProps for opacity and tiling.

```javascript
import { PDFCropper } from 'react-pdf-cropper';

function CustomCropper() {
  return (
    <PDFCropper
      showDefaultButtons={false}
      watermarkImage="/logo.png"
      watermarkProps={{
        opacity: 0.5,
        tiling: 'repeat'
      }}
      // ... other props
    />
  );
}
```

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

### React Touch-Enabled Mobile PDF Cropper

Source: https://context7.com/shivam27k/react-pdf-cropper/llms.txt

This React component enables touch-based PDF cropping for mobile devices. It integrates with `@react-pdf-viewer/core` and `react-pdf-cropper` to provide a seamless cropping experience. Dependencies include React, PDF.js, and the react-pdf-cropper library. It takes a PDF file URL as input and outputs a cropped image data URL.

```jsx
import React, { useState, useRef } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import PDFCropperOverlay, { handleDownload } from "react-pdf-cropper";
import "@react-pdf-viewer/core/lib/styles/index.css";

function MobilePDFCropper() {
  const containerRef = useRef();
  const [pdfFile] = useState("/mobile-document.pdf");
  const [croppedImage, setCroppedImage] = useState(null);
  const [page, setPage] = useState(1);
  const [isCropping, setIsCropping] = useState(false);

  const handleCrop = (dataUrl) => {
    setCroppedImage(dataUrl);
    // Haptic feedback on mobile devices
    if (navigator.vibrate) {
      navigator.vibrate(50);
    }
  };

  return (
    <div style={{
      width: "100vw",
      height: "100vh",
      display: "flex",
      flexDirection: "column",
      touchAction: "none" // Prevent default touch behaviors
    }}>
      <div style={{
        padding: "0.5rem",
        background: "#333",
        color: "#fff",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <span>Page {page}</span>
        <button
          onClick={() => setIsCropping(!isCropping)}
          style={{
            padding: "8px 16px",
            background: isCropping ? "#dc3545" : "#28a745",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            fontSize: "14px"
          }}
        >
          {isCropping ? "✕ Cancel" : "✂️ Crop"}
        </button>
      </div>

      <div
        ref={containerRef}
        style={{
          position: "relative",
          flex: 1,
          overflow: "auto",
          WebkitOverflowScrolling: "touch"
        }}
      >
        <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
          <Viewer
            fileUrl={pdfFile}
            onPageChange={e => setPage(e.currentPage + 1)}
          />
        </Worker>

        <PDFCropperOverlay
          containerRef={containerRef}
          isCropping={isCropping}
          setIsCropping={setIsCropping}
          currentPage={page}
          onCrop={handleCrop}
        />
      </div>

      {croppedImage && (
        <div style={{
          position: "fixed",
          bottom: 0,
          left: 0,
          right: 0,
          background: "#fff",
          padding: "1rem",
          boxShadow: "0 -2px 10px rgba(0,0,0,0.1)",
          maxHeight: "40vh",
          overflow: "auto"
        }}>
          <img src={croppedImage} alt="Cropped" style={{ width: "100%" }} />
          <button
            onClick={() => handleDownload(croppedImage)}
            style={{
              width: "100%",
              padding: "12px",
              marginTop: "0.5rem",
              background: "#007bff",
              color: "#fff",
              border: "none",
              borderRadius: "4px",
              fontSize: "16px"
            }}
          >
            📥 Download Image
          </button>
        </div>
      )}
    </div>
  );
}

export default MobilePDFCropper;

```

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

### Using Exported Buttons for Cropping in React

Source: https://github.com/shivam27k/react-pdf-cropper/blob/main/README.md

Integrate CropPreviewButton and CancelCropButton into your custom UI to manage the PDF cropping and preview process. These components require onClick handlers obtained from the getHandlers function.

```javascript
import { CropPreviewButton, CancelCropButton, getHandlers } from 'react-pdf-cropper';

function MyCropperComponent() {
  const { handleCrop, handleCancel } = getHandlers();

  return (
    <div>
      {/* Your PDF viewer and cropper canvas here */}
      <CropPreviewButton onClick={handleCrop} />
      <CancelCropButton onClick={handleCancel} />
    </div>
  );
}
```

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

### Download Cropped PDF Images with Custom Filenames (React)

Source: https://context7.com/shivam27k/react-pdf-cropper/llms.txt

This React component demonstrates how to download cropped PDF regions. It utilizes the `handleDownload` function from `react-pdf-cropper` to save the image data URL with a user-specified filename. It supports both single and multiple downloads, with options for processing the image data before saving.

```jsx
import React, { useState, useRef } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import PDFCropperOverlay, { handleDownload } from "react-pdf-cropper";
import "@react-pdf-viewer/core/lib/styles/index.css";

function DownloadableEditor() {
  const containerRef = useRef();
  const [pdfFile] = useState("/invoice-2024.pdf");
  const [croppedImage, setCroppedImage] = useState(null);
  const [page, setPage] = useState(1);
  const [isCropping, setIsCropping] = useState(false);
  const [filename, setFilename] = useState("cropped-invoice");

  const handleDownloadClick = () => {
    if (croppedImage) {
      handleDownload(croppedImage, `${filename}.png`);
    }
  };

  const handleMultipleDownloads = () => {
    if (croppedImage) {
      // Download in different formats
      handleDownload(croppedImage, `${filename}-original.png`);

      // You can also process the dataURL before downloading
      const processedDataUrl = croppedImage; // Apply filters if needed
      handleDownload(processedDataUrl, `${filename}-processed.png`);
    }
  };

  return (
    <div>
      <button onClick={() => setIsCropping(true)}>Crop PDF Region</button>

      <div ref={containerRef} style={{ position: "relative", width: 800, height: 900 }}>
        <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
          <Viewer
            fileUrl={pdfFile}
            onPageChange={e => setPage(e.currentPage + 1)}
          />
        </Worker>

        <PDFCropperOverlay
          containerRef={containerRef}
          isCropping={isCropping}
          setIsCropping={setIsCropping}
          currentPage={page}
          onCrop={setCroppedImage}
        />
      </div>

      {croppedImage && (
        <div style={{ padding: "1rem", background: "#f0f0f0" }}>
          <img src={croppedImage} alt="Cropped" style={{ maxWidth: 400 }} />

          <div style={{ marginTop: "1rem", display: "flex", gap: "0.5rem" }}>
            <input
              type="text"
              value={filename}
              onChange={(e) => setFilename(e.target.value)}
              placeholder="Filename"
              style={{ padding: "8px", flex: 1 }}
            />
            <button
              onClick={handleDownloadClick}
              style={{ padding: "8px 16px", background: "#28a745", color: "#fff", border: "none" }}
            >
              📥 Download
            </button>
            <button
              onClick={handleMultipleDownloads}
              style={{ padding: "8px 16px", background: "#17a2b8", color: "#fff", border: "none" }}
            >
              📦 Download Multiple
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

export default DownloadableEditor;

```

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

### Watermarking PDF Cropper Output with Custom Logo

Source: https://context7.com/shivam27k/react-pdf-cropper/llms.txt

Applies a watermark logo to cropped PDF images with options for opacity and tiling. This feature enhances document security or branding. It requires a watermark image path and configurable properties for its appearance. Outputs a watermarked image.

```jsx
import React, { useRef, useState } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import PDFCropperOverlay from "react-pdf-cropper";
import "@react-pdf-viewer/core/lib/styles/index.css";

function WatermarkedCropper() {
  const containerRef = useRef();
  const [pdfFile] = useState("/confidential-document.pdf");
  const [croppedImage, setCroppedImage] = useState(null);
  const [page, setPage] = useState(1);
  const [isCropping, setIsCropping] = useState(false);

  const watermarkProps = {
    opacity: 0.15,      // 15% opacity for subtle watermark
    tileWidth: 100,     // Width of each tiled watermark instance
    tileHeight: 100     // Height of each tiled watermark instance
  };

  const handleCrop = (dataUrl) => {
    setCroppedImage(dataUrl);
    console.log("Cropped image with watermark ready");
    // Send to backend or process further
  };

  return (
    <div>
      <button onClick={() => setIsCropping(true)}>
        Start Cropping (with Watermark)
      </button>

      <div ref={containerRef} style={{ position: "relative", width: 800, height: 900 }}>
        <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
          <Viewer
            fileUrl={pdfFile}
            onPageChange={e => setPage(e.currentPage + 1)}
          />
        </Worker>

        <PDFCropperOverlay
          containerRef={containerRef}
          isCropping={isCropping}
          setIsCropping={setIsCropping}
          currentPage={page}
          onCrop={handleCrop}
          watermarkImage="/company-logo.png"
          watermarkProps={watermarkProps}
        />
      </div>

      {croppedImage && (
        <div>
          <p>Watermarked image with logo on white strip and tiled pattern:</p>
          <img src={croppedImage} alt="Watermarked crop" style={{ maxWidth: 500 }} />
        </div>
      )}
    </div>
  );
}

export default WatermarkedCropper;

```

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

### Custom Button Integration with React PDF Cropper

Source: https://context7.com/shivam27k/react-pdf-cropper/llms.txt

Enables the use of external buttons to control crop and cancel actions, allowing for custom UI and positioning. It requires state management for cropping status and handlers for UI interactions. Outputs a cropped image or cancels the cropping process.

```jsx
import React, { useRef, useState, useCallback } from "react";
import { Worker, Viewer } from "@react-pdf-viewer/core";
import PDFCropperOverlay, {
  CropPreviewButton,
  CancelCropButton
} from "react-pdf-cropper";
import "@react-pdf-viewer/core/lib/styles/index.css";

function CustomUIExample() {
  const containerRef = useRef();
  const [pdfFile] = useState("/document.pdf");
  const [croppedImage, setCroppedImage] = useState(null);
  const [page, setPage] = useState(1);
  const [isCropping, setIsCropping] = useState(false);
  const [handlers, setHandlers] = useState({});

  const getHandlers = useCallback((handlers) => {
    setHandlers(handlers);
  }, []);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      {/* Custom toolbar with external buttons */}
      <div style={{ display: "flex", gap: "0.5rem", padding: "1rem", background: "#f5f5f5" }}>
        <button
          onClick={() => setIsCropping(true)}
          disabled={isCropping}
          style={{ padding: "8px 16px", background: "#007bff", color: "#fff", border: "none" }}
        >
          ✂️ Enable Crop Mode
        </button>

        {isCropping && (
          <>
            <CropPreviewButton
              onClick={handlers.handleSaveClick}
              style={{ padding: "8px 16px" }}
            >
              💾 Save Crop
            </CropPreviewButton>
            <CancelCropButton
              onClick={handlers.stopCropping}
              style={{ padding: "8px 16px" }}
            >
              ❌ Cancel
            </CancelCropButton>
          </>
        )}
      </div>

      <div ref={containerRef} style={{ position: "relative", width: 900, height: 800 }}>
        <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
          <Viewer
            fileUrl={pdfFile}
            onPageChange={e => setPage(e.currentPage + 1)}
          />
        </Worker>

        <PDFCropperOverlay
          containerRef={containerRef}
          isCropping={isCropping}
          setIsCropping={setIsCropping}
          currentPage={page}
          onCrop={setCroppedImage}
          getHandlers={getHandlers}
          showDefaultButtons={false}
        />
      </div>

      {croppedImage && (
        <div style={{ padding: "1rem", background: "#f9f9f9" }}>
          <h3>Cropped Result:</h3>
          <img src={croppedImage} alt="Cropped" style={{ maxWidth: "100%", border: "2px solid #ddd" }} />
        </div>
      )}
    </div>
  );
}

export default CustomUIExample;

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.