### Prefetch Method Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Configures the HTTP method for fetching document metadata. This example sets it to 'GET', suitable for AWS S3 signed URLs.

```typescript
// For AWS S3 signed URLs
<DocViewer
  documents={docs}
  prefetchMethod="GET"
/>
```

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

### Installation

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Install the package using npm or yarn.

```bash
npm i @cyntler/react-doc-viewer
# or
yarn add @cyntler/react-doc-viewer
```

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

### Theme Configuration Examples

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Example of how to apply a dark mode theme to the Doc Viewer.

```typescript
<DocViewer
  documents={docs}
  theme={{
    primary: "#1a1a1a",
    secondary: "#ffffff",
    tertiary: "#444444",
    textPrimary: "#ffffff",
    textSecondary: "#1a1a1a",
    textTertiary: "#ffffff99",
  }}
/>
```

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

### Basic Setup

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/README.md

Basic setup for using the DocViewer component.

```typescript
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import "@cyntler/react-doc-viewer/dist/index.css";

<DocViewer documents={docs} pluginRenderers={DocViewerRenderers} />
```

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

### Installation

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/index.md

Install the @cyntler/react-doc-viewer package using npm.

```bash
npm install @cyntler/react-doc-viewer
```

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

### Complete Configuration Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

A comprehensive example showcasing various configuration options including documents, language, prefetch method, request headers, theme, and detailed config settings.

```typescript
<DocViewer
  documents={[
    { uri: "https://example.com/doc.pdf", fileName: "Report" },
    { uri: "https://example.com/image.png", fileName: "Screenshot" },
  ]}
  pluginRenderers={DocViewerRenderers}
  language="en"
  prefetchMethod="GET"
  requestHeaders={{
    "Authorization": "Bearer token123",
  }}
  theme={{
    primary: "#ffffff",
    secondary: "#333333",
    textPrimary: "#333333",
  }}
  config={{
    header: {{
      disableFileName: false,
      retainURLParams: false,
    }},
    csvDelimiter: ",",
    pdfZoom: {{
      defaultZoom: 1.0,
      zoomJump: 0.1,
    }},
    pdfVerticalScrollByDefault: false,
    loadingRenderer: {{
      showLoadingTimeout: 500,
    }},
  }}
/>
```

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

### Loading Configuration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of configuring the loading indicator behavior.

```typescript
config={{
  loadingRenderer: {
    overrideComponent: ({ document, fileName }) => { /* ... */ },
    showLoadingTimeout: 500, // false to disable
  },
}}
```

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

### Language Configuration Examples

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Demonstrates how to set the UI language for the document viewer. Examples show German and Japanese.

```typescript
<DocViewer
  documents={docs}
  language="de"  // German UI
/>

<DocViewer
  documents={docs}
  language="ja"  // Japanese UI
/>
```

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

### Video Renderer Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example usage of the Video renderer.

```typescript
import DocViewer, { VideoRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[{ uri: "video.mp4" }]} 
  pluginRenderers={[VideoRenderer]}
/>
```

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

### HTML Renderer Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example usage of the HTML renderer.

```typescript
import DocViewer, { HTMLRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[{ uri: "page.html" }]}
  pluginRenderers={[HTMLRenderer]}
/>
```

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

### Header Configuration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of configuring the header options for the DocViewer component.

```typescript
config={{
  header: {
    disableHeader: false,
    disableFileName: false,
    retainURLParams: false,
    overrideComponent: (state, prev, next) => { /* ... */ },
  },
}}
```

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

### Config Object Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Shows a comprehensive example of the `config` object with various options for header, CSV delimiter, PDF zoom, and scrolling.

```tsx
<DocViewer
  documents={docs}
  config={{
    header: {
      disableHeader: false,
      disableFileName: false,
      retainURLParams: false,
    },
    csvDelimiter: ",", // "," as default,
    pdfZoom: {
      defaultZoom: 1.1, // 1 as default,
      zoomJump: 0.2, // 0.1 as default,
    },
    pdfVerticalScrollByDefault: true, // false as default
  }}
/>
```

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

### IHeaderConfig Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/types.md

Example of configuring the header.

```typescript
config={{
  header: {{
    disableHeader: false,
    disableFileName: false,
    retainURLParams: false,
  }},
}}
```

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

### PDF Configuration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of configuring PDF-specific options like zoom.

```typescript
config={{
  pdfZoom: {
    defaultZoom: 1.0,
    zoomJump: 0.1,
  },
  pdfVerticalScrollByDefault: false,
}}
```

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

### Theme Object Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Provides an example of how to pass a theme object to customize the appearance of the DocViewer component.

```xml
<DocViewer
  documents={docs}
  theme={{
    primary: "#5296d8",
    secondary: "#ffffff",
    tertiary: "#5296d899",
    textPrimary: "#ffffff",
    textSecondary: "#5296d8",
    textTertiary: "#00000099",
    disableThemeScrollbar: false,
  }}
/>
```

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

### Text Renderer Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example of using the TXTRenderer with DocViewer.

```typescript
import DocViewer, { TXTRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[{ uri: "file.txt" }]}
  pluginRenderers={[TXTRenderer]}
/>
```

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

### useWindowSize Hook Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

Example of using the useWindowSize hook to implement responsive components.

```typescript
import { useWindowSize } from "@cyntler/react-doc-viewer";

function ResponsiveComponent() {
  const size = useWindowSize();

  return (
    <div>
      {size.width && size.width < 768 ? (
        <MobileLayout />
      ) : (
        <DesktopLayout />
      )}
    </div>
  );
}
```

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

### Image Renderers Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example demonstrating how to use PNG and JPG renderers with DocViewer.

```typescript
import DocViewer, { PNGRenderer, JPGRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[
    { uri: "https://example.com/image.png" },
    { uri: "https://example.com/photo.jpg" },
  ]}
  pluginRenderers={[PNGRenderer, JPGRenderer]}
/>
```

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

### Basic Component Usage

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

A basic example of using the DocViewer component with a single document.

```typescript
<DocViewer
  documents={[
    { uri: "https://example.com/file.pdf" },
  ]}
  pluginRenderers={DocViewerRenderers}
/>
```

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

### File Input (Blobs)

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of handling file inputs using Blobs and updating the DocViewer.

```typescript
const [files, setFiles] = useState<File[]>([]);

<input
  type="file"
  multiple
  onChange={(e) => setFiles(Array.from(e.target.files || []))}
/>

<DocViewer
  documents={files.map((file) => ({
    uri: URL.createObjectURL(file),
    fileName: file.name,
  }))}
  pluginRenderers={DocViewerRenderers}
/>
```

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

### binaryStringFileLoader Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Example of how to assign binaryStringFileLoader to a renderer.

```typescript
import { binaryStringFileLoader } from "@cyntler/react-doc-viewer";

MyRenderer.fileLoader = binaryStringFileLoader;
```

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

### Dispatch Actions

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Examples of dispatching actions for managing documents and viewer state.

```typescript
import {
  setAllDocuments,
  setDocumentLoading,
  nextDocument,
  previousDocument,
  updateCurrentDocument,
  setRendererRect,
  setMainConfig,
} from "@cyntler/react-doc-viewer";

dispatch(setAllDocuments(docs, initialDoc));
dispatch(setDocumentLoading(true));
dispatch(nextDocument());
dispatch(previousDocument());
dispatch(updateCurrentDocument(doc));
dispatch(setRendererRect(rect));
dispatch(setMainConfig(config));
```

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

### Error Configuration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of configuring the behavior when no renderer is found for a file.

```typescript
config={{
  noRenderer: {
    overrideComponent: ({ document, fileName }) => { /* ... */ },
  },
}}
```

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

### ITheme Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/types.md

Example of applying custom theme settings.

```typescript
theme={{
  primary: "#1a1a1a",
  secondary: "#ffffff",
  textPrimary: "#ffffff",
  disableThemeScrollbar: true,
}}
```

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

### Custom Renderers

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of creating and using a custom renderer for specific file types.

```typescript
const MyRenderer: DocRenderer = ({ mainState }) => {
  const doc = mainState.currentDocument;
  if (!doc) return null;
  return <div>{doc.fileData}</div>;
};

MyRenderer.fileTypes = ["custom"];
MyRenderer.weight = 0;
MyRenderer.fileLoader = textFileLoader; // Optional

<DocViewer pluginRenderers={[MyRenderer]} ... />
```

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

### IDocument Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/types.md

Example of how to use the IDocument interface.

```typescript
const documents: IDocument[] = [
  {
    uri: "https://example.com/document.pdf",
    fileName: "My Document",
  },
  {
    uri: "https://example.com/image.png",
    fileType: "image/png",
    fileName: "Screenshot",
  },
  {
    uri: require("./local-file.pdf"),
  },
];
```

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

### TIFF Renderer Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example of using the TIFFRenderer with DocViewer.

```typescript
import DocViewer, { TIFFRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[{ uri: "file.tiff" }]}
  pluginRenderers={[TIFFRenderer]}
/>
```

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

### useRendererSelector Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

An example demonstrating how to use the useRendererSelector hook.

```typescript
import { useRendererSelector } from "@cyntler/react-doc-viewer";

function RendererInfo() {
  const { CurrentRenderer } = useRendererSelector();

  if (CurrentRenderer === undefined) {
    return <div>Detecting file type...</div>;
  }

  if (CurrentRenderer === null) {
    return <div>Unsupported file type</div>;
  }

  return <div>Using {CurrentRenderer.name} renderer</div>;
}
```

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

### PDF Renderer Configuration Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example of how to configure PDF-specific settings like zoom and scrolling mode.

```typescript
import DocViewer, { PDFRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[{ uri: "https://example.com/file.pdf" }]}
  pluginRenderers={[PDFRenderer]}
  config={{
    pdfZoom: {
      defaultZoom: 1.2,
      zoomJump: 0.1,
    },
    pdfVerticalScrollByDefault: true,
  }}
/>
```

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

### Refs (Imperative API)

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of using refs to control the DocViewer component imperatively.

```typescript
const docViewerRef = useRef<DocViewerRef>(null);

<DocViewer ref={docViewerRef} ... />

docViewerRef.current?.prev();
docViewerRef.current?.next();
```

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

### Theme Colors

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Example of defining custom theme colors for the DocViewer component.

```typescript
theme={{
  primary: "#fff",           // Main background
  secondary: "#000",         // Text/borders
  tertiary: "#ffffff99",     // Disabled/hover
  textPrimary: "#000",       // Text
  textSecondary: "#fff",     // Alt text
  textTertiary: "#00000044", // Subtle text
  disableThemeScrollbar: false,
}}
```

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

### useDocumentLoader Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

An example demonstrating how to use the useDocumentLoader hook in a React component.

```typescript
import { useDocumentLoader } from "@cyntler/react-doc-viewer";

function MyComponent() {
  const { state, dispatch, CurrentRenderer } = useDocumentLoader();

  if (!state.currentDocument) {
    return <div>No document</div>;
  }

  if (!CurrentRenderer) {
    return <div>No renderer for {state.currentDocument.fileType}</div>;
  }

  return <CurrentRenderer mainState={state} />;
}
```

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

### Debugging with Hooks

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Examples of using hooks for debugging and accessing component state.

```typescript
// Access state in hooks
const { state } = useDocumentLoader();
console.log("Current doc:", state.currentDocument);
console.log("Loading:", state.documentLoading);
console.log("Renderer:", state.pluginRenderers);

// Check translation
const { t } = useTranslation();
console.log(t("noRendererMessage"));

// Inspect window size
const size = useWindowSize();
console.log("Window:", size.width, size.height);
```

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

### Microsoft Office Renderer Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example usage of the Microsoft Office renderer with public URLs.

```typescript
import DocViewer, { MSDocRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[
    { uri: "https://example.com/document.docx" }, // ✓ Public URL
    { uri: "https://example.com/spreadsheet.xlsx" }, // ✓ Public URL
  ]}
  pluginRenderers={[MSDocRenderer]}
/>
```

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

### IPdfZoomConfig Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/types.md

Example of how to configure PDF zoom settings.

```typescript
config={{
  pdfZoom: {
    defaultZoom: 1.2,
    zoomJump: 0.2,
  },
}}
```

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

### Translation Keys with Variables

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Examples of using translation keys with variables for dynamic content.

```typescript
t("noRendererMessage", { fileType: "PDF" })
t("pdfPluginPageNumber", { pageNumber: 1, pagesCount: 10 })
```

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

### PDF Zoom Configuration Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

This example demonstrates how to configure PDF zoom behavior, setting the initial zoom level to 150% (`defaultZoom: 1.5`) and the zoom increment per click to 25% (`zoomJump: 0.25`).

```typescript
// 150% zoom by default, 25% per click
<DocViewer
  documents={docs}
  config={{
    pdfZoom: {
      defaultZoom: 1.5,
      zoomJump: 0.25,
    },
  }}
/>
```

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

### dataURLFileLoader Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Example of how to use dataURLFileLoader with a custom renderer to display an image.

```typescript
import { dataURLFileLoader } from "@cyntler/react-doc-viewer";

const MyRenderer: DocRenderer = ({ mainState }) => {
  const dataUrl = mainState.currentDocument?.fileData as string;
  return <img src={dataUrl} />;
};

MyRenderer.fileTypes = ["png"];
MyRenderer.fileLoader = dataURLFileLoader;
```

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

### Example Custom Renderer Implementation

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

A basic implementation of a custom renderer.

```typescript
import { DocRenderer } from "@cyntler/react-doc-viewer";

const MyCustomRenderer: DocRenderer = ({ mainState }) => {
  const { currentDocument } = mainState;

  if (!currentDocument) return null;

  return (
    <div style={{ padding: "20px" }}>
      <p>Custom rendering:</p>
      <pre>{currentDocument.fileData}</pre>
    </div>
  );
};

MyCustomRenderer.fileTypes = ["custom", "application/custom"];
MyCustomRenderer.weight = 1;
MyCustomRenderer.fileLoader = textFileLoader; // Optional

export default MyCustomRenderer;
```

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

### CSV Renderer Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example usage of the CSV renderer with a custom delimiter.

```typescript
import DocViewer, { CSVRenderer } from "@cyntler/react-doc-viewer";

<DocViewer
  documents={[{ uri: "data.csv" }]}
  pluginRenderers={[CSVRenderer]}
  config={{
    csvDelimiter: ";",
  }}
/>
```

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

### IHeaderOverride Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/types.md

Example of a custom header component.

```typescript
const MyHeader: IHeaderOverride = (state, previousDocument, nextDocument) => {
  if (!state.currentDocument) return null;

  return (
    <div style={{ padding: "10px", display: "flex", alignItems: "center" }}>
      <span>{state.currentDocument.fileName}</span>
      <button onClick={previousDocument} disabled={state.currentFileNo === 0}>
        Previous
      </button>
      <button
        onClick={nextDocument}
        disabled={state.currentFileNo >= state.documents.length - 1}
      >
        Next
      </button>
    </div>
  );
};
```

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

### Request Headers Example: API Key

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Includes an 'X-API-Key' header for services requiring API key authentication.

```typescript
<DocViewer
  documents={docs}
  requestHeaders={{
    "X-API-Key": "sk_live_abc123def456",
  }}
/>
```

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

### Overriding Header Component Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Provides an example of how to override the default header component with a custom implementation using `config.header.overrideComponent`.

```tsx
const MyHeader: IHeaderOverride = (state, previousDocument, nextDocument) => {
  if (!state.currentDocument || state.config?.header?.disableFileName) {
    return null;
  }

  return (
    <>
      <div>{state.currentDocument.uri || ""}</div>
      <div>
        <button onClick={previousDocument} disabled={state.currentFileNo === 0}>
          Previous Document
        </button>
        <button
          onClick={nextDocument}
          disabled={state.currentFileNo >= state.documents.length - 1}
        >
          Next Document
        </button>
      </div>
    </>
  );
};

<DocViewer
  pluginRenderers={DocViewerRenderers}
  documents={
    {
      // ...
    }
  }
  config={{
    header: {
      overrideComponent: MyHeader,
    },
  }}
/>;
```

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

### textFileLoader Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Example of how to use textFileLoader with a custom renderer to display text content.

```typescript
import { textFileLoader } from "@cyntler/react-doc-viewer";

const MyTextRenderer: DocRenderer = ({ mainState }) => {
  const text = mainState.currentDocument?.fileData as string;
  return <pre>{text}</pre>;
};

MyTextRenderer.fileTypes = ["log"];
MyTextRenderer.fileLoader = textFileLoader;
```

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

### Request Headers Example: Authentication

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Adds an 'Authorization' header with a Bearer token for authenticated requests.

```typescript
<DocViewer
  documents={docs}
  requestHeaders={{
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiIs...",
  }}
/>
```

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

### Example: Custom Container Style

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Demonstrates how to use styled-components to customize the appearance of the DocViewer component and its internal elements like the header bar.

```typescript
import styled from "styled-components";
import DocViewer from "@cyntler/react-doc-viewer";

const StyledDocViewer = styled(DocViewer)`
  border: 2px solid #3498db;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  #header-bar {
    background-color: #3498db;
    color: white;
  }

  #file-name {
    font-weight: bold;
  }
`;

export function App() {
  return (
    <StyledDocViewer documents={docs} pluginRenderers={DocViewerRenderers} />
  );
}
```

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

### Blue Theme Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Applies a blue theme to the document viewer by customizing primary, secondary, tertiary, and text colors.

```typescript
<DocViewer
  documents={docs}
  theme={{
    primary: "#e3f2fd",
    secondary: "#1976d2",
    tertiary: "#bbdefb",
    textPrimary: "#1565c0",
    textSecondary: "#ffffff",
    textTertiary: "#0d47a1",
  }}
/>
```

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

### arrayBufferFileLoader Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Example of how to use arrayBufferFileLoader with a custom renderer for processing binary data.

```typescript
import { arrayBufferFileLoader } from "@cyntler/react-doc-viewer";

const MyBinaryRenderer: DocRenderer = ({ mainState }) => {
  const buffer = mainState.currentDocument?.fileData as ArrayBuffer;
  // Process binary data
  const view = new Uint8Array(buffer);
  return <div>Binary data: {view.length} bytes</div>;
};

MyBinaryRenderer.fileTypes = ["custom-binary"];
MyBinaryRenderer.fileLoader = arrayBufferFileLoader;
```

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

### useTranslation Hook Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

Example of how to use the useTranslation hook in a React component.

```typescript
import { useTranslation } from "@cyntler/react-doc-viewer";

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <p>{t("noRendererMessage", { fileType: "pdf" })}</p>
      <button>{t("downloadButtonLabel")}</button>
    </div>
  );
}
```

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

### Custom Renderer Component Example with useDocumentLoader

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

An example of a custom renderer component utilizing the useDocumentLoader hook.

```typescript
import { useDocumentLoader } from "@cyntler/react-doc-viewer";

function CustomPDFViewer() {
  const { state, CurrentRenderer } = useDocumentLoader();

  if (!state.currentDocument) {
    return null;
  }

  if (state.documentLoading) {
    return <div>Loading...</div>;
  }

  if (!CurrentRenderer) {
    return <div>Cannot render {state.currentDocument.fileType}</div>;
  }

  return (
    <div>
      <h2>{state.currentDocument.fileName || "Document"}</h2>
      <CurrentRenderer mainState={state} />
    </div>
  );
}
```

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

### Context Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

Demonstrates correct and incorrect usage of hooks that depend on DocViewerContext.

```typescript
// ❌ This will error
function OutsideDocViewer() {
  const { state } = useDocumentLoader(); // Error: no context provider
}

// ✓ This works
function InsideDocViewer() {
  return (
    <DocViewer documents={docs} pluginRenderers={DocViewerRenderers}>
      <MyComponent /> {/* Can use hooks here */}
    </DocViewer>
  );
}

function MyComponent() {
  const { state } = useDocumentLoader(); // Works
}
```

```typescript
const MyRenderer: DocRenderer = ({ mainState }) => {
  // MainState passed as prop, but you can also useDocumentLoader() within components
  return <MyRendererContent />;
};

function MyRendererContent() {
  const { state } = useDocumentLoader(); // Works because parent is DocViewer
}
```

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

### Custom Renderer Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/types.md

Example of creating a custom document renderer component for handling specific file types (e.g., PNG images).

```typescript
const MyRenderer: DocRenderer = ({ mainState }) => {
  const { currentDocument } = mainState;

  if (!currentDocument) return null;

  return (
    <div>
      <img src={currentDocument.fileData as string} />
    </div>
  );
};

MyRenderer.fileTypes = ["png", "image/png"];
MyRenderer.weight = 0;

export default MyRenderer;
```

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

### Hooks (inside DocViewer tree)

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Examples of using hooks provided within the DocViewer component's tree.

```typescript
// Load document and get state
const { state, dispatch, CurrentRenderer } = useDocumentLoader();

// Get selected renderer
const { CurrentRenderer } = useRendererSelector();

// Get translations
const { t } = useTranslation();
t("noRendererMessage", { fileType: "PDF" });

// Get window size
const { width, height } = useWindowSize();
```

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

### DocViewerRef Usage Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/types.md

Example demonstrating how to use the `useRef` hook with `DocViewerRef` to control document navigation imperatively.

```typescript
const docViewerRef = useRef<DocViewerRef>(null);

<DocViewer ref={docViewerRef} documents={docs} />

<button onClick={() => docViewerRef.current?.prev()}>Previous</button>
<button onClick={() => docViewerRef.current?.next()}>Next</button>
```

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

### Styled Components Integration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Example of using styled-components to customize the DocViewer component.

```tsx
import styled from "styled-components";

// ...

<MyDocViewer documents={docs} />;

// ...

const MyDocViewer = styled(DocViewer)`
  border-radius: 10px;
`;
```

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

### Configuring Loading Timeout

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Example of disabling the loading timeout or setting a custom time in milliseconds.

```tsx
const MyLoadingRenderer = ({ document, fileName }) => {
  ...
};

<DocViewer
  pluginRenderers={DocViewerRenderers}
  documents={
    {
      // ...
    }
  }
  config={{
    loadingRenderer: {
      overrideComponent: MyLoadingRenderer,
      showLoadingTimeout: false, // false if you want to disable or number to provide your own value (ms)
    },
  }}
/>;
```

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

### Disable Header

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

This example shows how to disable the entire header bar by setting `disableHeader` to `true` within the `header` configuration object.

```typescript
<DocViewer
  documents={docs}
  config={{
    header: {
      disableHeader: true,
    },
  }}
/>
```

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

### Weight Priority Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

Demonstrates how renderer weights determine priority when multiple renderers support the same MIME type.

```typescript
// PDFRenderer
PDFRenderer.weight = 0;

// Custom PDF renderer with higher priority
CustomPDFRenderer.weight = 10;

// When pluginRenderers includes both, CustomPDFRenderer will be selected
pluginRenderers={[PDFRenderer, CustomPDFRenderer]}
```

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

### Internationalization (i18n) Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Illustrates how to set the language for translated UI elements using the `language` prop.

```xml
<DocViewer documents={docs} language="pl" />
```

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

### Translation Variables Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/hooks.md

Illustrates how to use template variables with translation keys.

```typescript
// noRendererMessage supports "fileType" variable
t("noRendererMessage", { fileType: "PDF" })
// Returns: "Cannot display PDF files"

// pdfPluginPageNumber supports "pageNumber" and "pagesCount" variables
t("pdfPluginPageNumber", { pageNumber: 1, pagesCount: 10 })
// Returns: "Page 1 of 10"
```

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

### Custom Header with Navigation

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

This example demonstrates how to create a custom header component that includes navigation buttons (previous and next) and displays the current file number out of the total number of documents. The `overrideComponent` prop is used to inject this custom header.

```typescript
const CustomHeader: IHeaderOverride = (state, prev, next) => {
  if (!state.currentDocument) return null;

  return (
    <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px", backgroundColor: "#f5f5f5", borderBottom: "1px solid #ddd"}}>
      <span>{state.currentDocument.fileName}</span>
      <div>
        <button onClick={prev} disabled={state.currentFileNo === 0}>
          ← Prev
        </button>
        <span style={{ margin: "0 10px" }}>
          {state.currentFileNo + 1} / {state.documents.length}
        </span>
        <button onClick={next} disabled={state.currentFileNo >= state.documents.length - 1}>
          Next →
        </button>
      </div>
    </div>
  );
};

<DocViewer
  documents={docs}
  config={{
    header: {
      overrideComponent: CustomHeader,
    },
  }}
/>
```

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

### Request Headers Example: CORS with Custom Headers

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Adds custom headers like 'X-Requested-By' and 'X-Custom-Header' for specific CORS requirements.

```typescript
<DocViewer
  documents={docs}
  requestHeaders={{
    "X-Requested-By": "react-doc-viewer",
    "X-Custom-Header": "value",
  }}
/>
```

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

### CSS Class Styling

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Example of applying custom styles to the DocViewer component using a CSS class.

```xml
<DocViewer documents={docs} className="my-doc-viewer-style" />
```

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

### Custom Scrollbar Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Enables a custom scrollbar within the document viewer. Set `disableThemeScrollbar` to `false` to activate.

```typescript
<DocViewer
  documents={docs}
  theme={{
    primary: "#ffffff",
    secondary: "#000000",
    tertiary: "#cccccc",
    disableThemeScrollbar: false, // Enable custom scrollbar
  }}
/>
```

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

### Basic Usage with All Renderers

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/docviewer-component.md

A basic example demonstrating how to use the DocViewer component with default renderers.

```typescript
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import "@cyntler/react-doc-viewer/dist/index.css";

export function App() {
  return (
    <DocViewer
      documents={[
        { uri: "https://example.com/document.pdf" },
        { uri: "https://example.com/image.png" },
      ]}
      pluginRenderers={DocViewerRenderers}
    />
  );
}
```

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

### Overriding Loading Renderer

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Example of passing a custom React component to override the default loading renderer.

```tsx
const MyLoadingRenderer = ({ document, fileName }) => {
  const fileText = fileName || document?.fileType || "";

  if (fileText) {
    return <div>Loading Renderer ({fileText})...</div>;
  }

  return <div>Loading Renderer...</div>;
};

<DocViewer
  pluginRenderers={DocViewerRenderers}
  documents={
    {
      // ...
    }
  }
  config={{
    loadingRenderer: {
      overrideComponent: MyLoadingRenderer,
    },
  }}
/>;
```

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

### Using Custom Renderers in DocViewer

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example of how to include custom renderers alongside built-in ones.

```typescript
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import MyCustomRenderer from "./MyCustomRenderer";

<DocViewer
  documents={docs}
  pluginRenderers={[...DocViewerRenderers, MyCustomRenderer]}
/>
```

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

### Using with useRef

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/docviewer-component.md

Example of how to use the DocViewer component with a ref to control navigation.

```typescript
import { useRef } from "react";
import DocViewer, { DocViewerRef } from "@cyntler/react-doc-viewer";

export function App() {
  const docViewerRef = useRef<DocViewerRef>(null);

  return (
    <>
      <button onClick={() => docViewerRef.current?.prev()}>Previous</button>
      <button onClick={() => docViewerRef.current?.next()}>Next</button>
      <DocViewer
        ref={docViewerRef}
        documents={docs}
        pluginRenderers={DocViewerRenderers}
      />
    </>
  );
}
```

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

### Implementing a Custom File Loader

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Example of creating a custom file loader function for special handling of documents.

```typescript
import { FileLoaderFunction } from "@cyntler/react-doc-viewer";

const customFileLoader: FileLoaderFunction = ({
  documentURI,
  signal,
  fileLoaderComplete,
  headers,
}) => {
  fetch(documentURI, { signal, headers })
    .then((res) => res.blob())
    .then((blob) => {
      const reader = new FileReader();
      
      reader.addEventListener("loadend", () => {
        // fileLoaderComplete() will be called with the reader
        fileLoaderComplete(reader);
      });
      
      // Choose how to read the file
      reader.readAsDataURL(blob); // or readAsArrayBuffer, readAsText, readAsBinaryString
    })
    .catch((error) => {
      // Errors caught silently; fileLoaderComplete still called
      console.error("Load failed:", error);
    });
};

export default customFileLoader;
```

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

### CSS Class Default Override Example

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Demonstrates how to override default styles by targeting specific DOM IDs within the DocViewer.

```css
#react-doc-viewer #header-bar {
  background-color: #faf;
}
```

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

### AWS S3 Signed URLs Prefetch Method

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Configuring the prefetchMethod to 'GET' for services like AWS S3 that may reject HEAD requests for signed URLs.

```typescript
// Use prefetchMethod to match S3 signature
<DocViewer
  documents={docs}
  pluginRenderers={DocViewerRenderers}
  prefetchMethod="GET"  // S3 may reject HEAD requests
/>
```

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

### Retain URL Parameters in Display Name

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

This example shows how to retain URL query parameters in the displayed file name by setting `retainURLParams` to `true`. For a URL like `https://example.com/file.pdf?version=2`, the display name will be `file.pdf?version=2`.

```typescript
// For URL: "https://example.com/file.pdf?version=2"
<DocViewer
  documents={docs}
  config={{
    header: {
      retainURLParams: true, // Shows: "file.pdf?version=2"
    },
  }}
/>
```

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

### Custom Renderer with File Loader

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/renderers.md

Example of a custom renderer that defines its own file loading behavior using `fileLoader`.

```typescript
const MyCustomRenderer: DocRenderer = ({ mainState }) => {
  // Uses custom loader specified below
  return <div>{mainState.currentDocument?.fileData}</div>;
};

MyCustomRenderer.fileTypes = ["custom"];
MyCustomRenderer.weight = 0;

MyCustomRenderer.fileLoader = ({ documentURI, signal, fileLoaderComplete }) => {
  fetch(documentURI, { signal })
    .then((res) => res.blob())
    .then((blob) => {
      // Custom processing
      const reader = new FileReader();
      reader.addEventListener("loadend", () => {
        fileLoaderComplete(reader);
      });
      reader.readAsDataURL(blob);
    });
};
```

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

### Using a Custom Loader Globally

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Example of passing custom renderers (which include custom loaders) to the DocViewer component.

```typescript
import DocViewer from "@cyntler/react-doc-viewer";
import MyRendererWithLoader from "./MyRendererWithLoader";

<DocViewer
  documents={docs}
  pluginRenderers={[MyRendererWithLoader]}
/>
```

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

### With Local Files (Blob URLs)

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/docviewer-component.md

Example of using local files (e.g., from an `<input type="file">`) by creating Blob URLs for the `DocViewer` component.

```typescript
import { useRef } from "react";

export function App() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [files, setFiles] = useState<File[]>([]);

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.length) {
      setFiles(Array.from(e.target.files));
    }
  };

  return (
    <>
      <input
        ref={inputRef}
        type="file"
        multiple
        onChange={handleFileInput}
      />
      <DocViewer
        documents={files.map((file) => ({
          uri: URL.createObjectURL(file),
          fileName: file.name,
        }))}
        pluginRenderers={DocViewerRenderers}
      />
    </>
  );
}
```

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

### Using a Custom Loader with a Renderer

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/file-loaders.md

Example of assigning a custom file loader to a specific renderer component.

```typescript
import { DocRenderer } from "@cyntler/react-doc-viewer";
import customFileLoader from "./customFileLoader";

const MyRenderer: DocRenderer = ({ mainState }) => {
  const data = mainState.currentDocument?.fileData;
  return <div>{/* Render data */}</div>;
};

MyRenderer.fileTypes = ["custom"];
MyRenderer.fileLoader = customFileLoader;
```

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

### Importing

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Import the DocViewer component and its renderers, along with the default CSS.

```typescript
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import "@cyntler/react-doc-viewer/dist/index.css";
```

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

### Package Exports

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Illustrates different ways to import components and styles from the package.

```typescript
// ESM (default)
import DocViewer from "@cyntler/react-doc-viewer";

// CommonJS
const DocViewer = require("@cyntler/react-doc-viewer").default;

// CSS
import "@cyntler/react-doc-viewer/dist/index.css";
```

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

### Styled Components Integration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Demonstrates how to style the DocViewer component using styled-components.

```typescript
import styled from "styled-components";
import DocViewer from "@cyntler/react-doc-viewer";

const StyledViewer = styled(DocViewer)`
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  #header-bar {
    background-color: #f5f5f5;
  }
`;

<StyledViewer documents={docs} ... />
```

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

### File Loaders

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Importing various file loader functions for different data types.

```typescript
import {
  dataURLFileLoader,      // Default, for images/HTML
  textFileLoader,         // For text files
  arrayBufferFileLoader,  // For binary formats
  binaryStringFileLoader, // Legacy
} from "@cyntler/react-doc-viewer";
```

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

### Development Server Commands

Source: https://github.com/cyntler/react-doc-viewer/blob/main/use-cases/nextjs/README.md

Commands to run the Next.js development server using different package managers.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Custom Renderers Only

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/docviewer-component.md

Example of using DocViewer with only custom renderers.

```typescript
import DocViewer, { PDFRenderer, PNGRenderer } from "@cyntler/react-doc-viewer";

export function App() {
  return (
    <DocViewer
      documents={docs}
      pluginRenderers={[PDFRenderer, PNGRenderer]}
    />
  );
}
```

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

### Basic Usage

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/index.md

Demonstrates how to use the DocViewer component with a list of documents and built-in renderers.

```tsx
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import "@cyntler/react-doc-viewer/dist/index.css";

export function App() {
  const docs = [
    { uri: "https://example.com/file.pdf" },
    { uri: require("./local-file.pdf") },
  ];

  return (
    <DocViewer
      documents={docs}
      pluginRenderers={DocViewerRenderers}
    />
  );
}
```

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

### Using DocViewerRef for Control

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Demonstrates how to use the `useRef` hook and `DocViewerRef` to control document navigation programmatically.

```tsx
import DocViewer, { DocViewerRef } from "@cyntler/react-doc-viewer";

export const UsingRef = () => {
  const docViewerRef = useRef<DocViewerRef>(null);

  return (
    <>
      <div>
        <button onClick={() => docViewerRef?.current?.prev()}>
          Prev Document By Ref
        </button>
        <button onClick={() => docViewerRef?.current?.next()}>
          Next Document By Ref
        </button>
      </div>
      <DocViewer
        ref={docViewerRef}
        documents={docs}
        config={{ header: { disableHeader: true } }}
      />
    </>
  );
};
```

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

### No Renderer Configuration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Configuration for controlling the display of the error state when a file type is unsupported, including custom error components.

```typescript
config={{
  noRenderer?: {
    overrideComponent?: ComponentType<{ document, fileName }>;
  };
}}
```

```typescript
const CustomErrorComponent = ({ document, fileName }) => {
  return (
    <div style={{ 
      padding: "40px",
      textAlign: "center",
      backgroundColor: "#fff3cd",
      border: "1px solid #ffc107",
      borderRadius: "4px",
    }}>
      <h3>File Type Not Supported</h3>
      <p>Cannot display {fileName || document?.fileType} files</p>
      {document?.uri && (
        <a href={document.uri} download>
          Download File
        </a>
      )}
    </div>
  );
};

<DocViewer
  documents={docs}
  config={{
    noRenderer: {
      overrideComponent: CustomErrorComponent,
    },
  }}
/>
```

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

### Initial Active Document

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Use the 'initialActiveDocument' prop to specify which document should be displayed initially, overriding the default of the first item.

```tsx
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import "@cyntler/react-doc-viewer/dist/index.css";

const App = () => {
  const docs = [
    { uri: "https://url-to-my-pdf.pdf" }, // Remote file
    { uri: require("./example-files/pdf.pdf") }, // Local File
  ];

  return (
    <DocViewer
      documents={docs}
      initialActiveDocument={docs[1]}
      pluginRenderers={DocViewerRenderers}
    />
  );
};

```

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

### Overriding No Renderer (Error)

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Example of passing a custom React component to override the default no renderer (error) component.

```tsx
const MyNoRenderer = ({ document, fileName }) => {
  const fileText = fileName || document?.fileType || "";

  if (fileText) {
    return <div>No Renderer Error! ({fileText})</div>;
  }

  return <div>No Renderer Error!</div>;
};

<DocViewer
  pluginRenderers={DocViewerRenderers}
  documents={
    {
      // ...
    }
  }
  config={{
    noRenderer: {
      overrideComponent: MyNoRenderer,
    },
  }}
/>;
```

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

### With Configuration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/docviewer-component.md

Shows how to configure various aspects of the `DocViewer` component, such as header options and PDF viewer settings, using the `config` prop.

```typescript
<DocViewer
  documents={docs}
  pluginRenderers={DocViewerRenderers}
  config={{
    header: {
      disableHeader: false,
      disableFileName: false,
      retainURLParams: false,
    },
    csvDelimiter: ";",
    pdfZoom: {
      defaultZoom: 1.5,
      zoomJump: 0.2,
    },
    pdfVerticalScrollByDefault: true,
  }}
/>
```

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

### With Authentication Headers

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/docviewer-component.md

Example of configuring DocViewer to include custom request headers for authentication.

```typescript
<DocViewer
  documents={docs}
  pluginRenderers={DocViewerRenderers}
  requestHeaders={{
    "Authorization": "Bearer token123",
    "X-Custom-Header": "value",
  }}
  prefetchMethod="GET"
/>
```

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

### Loading Renderer Configuration

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/configuration.md

Configuration for controlling the display of the loading indicator, including custom components and timeout settings.

```typescript
config={{
  loadingRenderer?: {
    overrideComponent?: ComponentType<{ document, fileName }>;
    showLoadingTimeout?: false | number;
  };
}}
```

```typescript
const CustomLoadingComponent = ({ document, fileName }) => {
  return (
    <div style={{ padding: "20px", textAlign: "center" }}>
      <div style={{ fontSize: "18px" }}>Loading...</div>
      <div>{fileName || document?.fileType}</div>
      <div style={{ marginTop: "10px" }}>
        <div style={{ 
          display: "inline-block",
          width: "30px",
          height: "30px",
          border: "3px solid #f3f3f3",
          borderTop: "3px solid #3498db",
          borderRadius: "50%",
          animation: "spin 1s linear infinite",
        }} />
      </div>
    </div>
  );
};

<DocViewer
  documents={docs}
  config={{
    loadingRenderer: {
      overrideComponent: CustomLoadingComponent,
    },
  }}
/>
```

```typescript
// Show loading immediately (no delay)
<DocViewer
  documents={docs}
  config={{
    loadingRenderer: {
      showLoadingTimeout: false,
    },
  }}
/>
```

```typescript
// Show after 1 second
<DocViewer
  documents={docs}
  config={{
    loadingRenderer: {
      showLoadingTimeout: 1000,
    },
  }}
/>
```

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

### Document Object Interface

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Defines the structure for a document object, including URI, file type, file data, and file name.

```typescript
interface IDocument {
  uri: string;                    // Required: HTTP URL, blob URL, file path
  fileType?: string;              // Optional: MIME type (auto-detected)
  fileData?: string | ArrayBuffer; // Loaded by library (don't set)
  fileName?: string;              // Optional: display name
}
```

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

### Custom File Loader

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Decorate a custom renderer with a 'fileLoader' callback to handle file loading logic yourself, for example, loading the file in an iFrame.

```tsx
MyCustomPNGRenderer.fileLoader = ({
  documentURI,
  signal,
  fileLoaderComplete,
}) => {
  myCustomFileLoaderCode().then(() => {
    // Whenever you have finished you must call fileLoaderComplete() to remove the loading animation
    fileLoaderComplete();
  });
};

```

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

### Basic Usage

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

DocViewer requires an array of document objects, each with a 'uri' pointing to a file (URL or local file).

```tsx
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import "@cyntler/react-doc-viewer/dist/index.css";

function App() {
  const docs = [
    { uri: "https://url-to-my-pdf.pdf" }, // Remote file
    { uri: require("./example-files/pdf.pdf") }, // Local File
  ];

  return <DocViewer documents={docs} pluginRenderers={DocViewerRenderers} />;
}
```

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

### Custom Pre-fetch HTTP Verb

Source: https://github.com/cyntler/react-doc-viewer/blob/main/README.md

Demonstrates how to specify a custom HTTP verb for pre-fetching document metadata using the `prefetchMethod` option.

```tsx
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";

<DocViewer prefetchMethod="GET" />;
```

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

### Controlled Mode with Document Navigation

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/api-reference/docviewer-component.md

Example of using the `useState` hook to manage the active document and control navigation within the `DocViewer` component.

```typescript
import { useState } from "react";

export function App() {
  const docs = [
    { uri: "https://example.com/doc1.pdf" },
    { uri: "https://example.com/doc2.pdf" },
  ];
  const [activeDoc, setActiveDoc] = useState(docs[0]);

  return (
    <DocViewer
      documents={docs}
      activeDocument={activeDoc}
      onDocumentChange={setActiveDoc}
      pluginRenderers={DocViewerRenderers}
    />
  );
}
```

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

### CSS ID Selectors for Styling

Source: https://github.com/cyntler/react-doc-viewer/blob/main/_autodocs/quick-reference.md

Lists CSS ID selectors available for targeting specific parts of the DocViewer component.

```css
#react-doc-viewer    /* Root */
#header-bar          /* Header */
#file-name           /* File name */
#document-nav        /* Navigation */
#proxy-renderer      /* Content area */
#loading-renderer    /* Loading */
#no-renderer         /* Error */
#pdf-renderer        /* PDF content */
#image-renderer      /* Images */
#txt-renderer        /* Text */
#csv-renderer        /* CSV table */
#html-renderer       /* HTML iframe */
#tiff-renderer       /* TIFF */
#video-renderer      /* Video */
#msdoc-renderer      /* Office docs */
```