### Install react-doc-viewer

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Install the core react-doc-viewer package using npm or yarn.

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

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

### Creating a Renderer Plugin

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Guide on how to create a custom renderer plugin for unsupported file types, including file type registration and weight.

```APIDOC
## Contributing

### Creating a Renderer Plugin

**Step 1** - Create a new folder inside `src/plugins`.

> e.g. `src/plugins/jpg`

Inside this folder, create a Renderer React Typescript file.

> e.g. `index.tsx`

**Step 2** - Inside JPGRenderer, export a functional component of type `DocRenderer`

```tsx
import React from "react";
import { DocRenderer } from "../../types";

// Be sure that Renderer correctly uses type DocRenderer
const JPGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
  if (!currentDocument) return null;

  return (
    <div id="jpg-renderer">
      <img id="jpg-img" src={currentDocument.fileData as string} />
    </div>
  );
};

export default JPGRenderer;

// List the MIME types that this renderer will respond to
JPGRenderer.fileTypes = ["jpg", "jpeg", "image/jpg", "image/jpeg"];

// If you have more than one renderer for the same MIME type, use weight. higher is more preferable.
// Included renderers have a weight of zero
JPGRenderer.weight = 1;
```

If you are creating a new renderer, also update `src/plugins/index.ts` with an import to your new renderer file, and Export it as part of the DocViewerRenderers `Array`.

```typescript
// ...
import JPGRenderer from "./jpg";

export const DocViewerRenderers = [
  // ...
  JPGRenderer,
];
```
```

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

### Creating a Custom Renderer in react-doc-viewer

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Define a custom React component for a renderer, specifying its file types and weight. This example shows a custom PNG renderer.

```tsx
import React from "react";
import DocViewer from "react-doc-viewer";

const MyCustomPNGRenderer: DocRenderer = ({ 
  mainState: { currentDocument }, 
}) => {
  if (!currentDocument) return null;

  return (
    <div id="my-png-renderer">
      <img id="png-img" src={currentDocument.fileData as string} />
    </div>
  );
};

MyCustomPNGRenderer.fileTypes = ["png", "image/png"];
MyCustomPNGRenderer.weight = 1;
```

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

### Configuration

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Configure specific parts of the DocViewer component, such as the header, using the config object.

```APIDOC
## Config

You can provide a config object, which configures parts of the component as required.

```xml
<DocViewer documents={docs} config={{
 header: {
  disableHeader: false,
  disableFileName: false,
  retainURLParams: false
 }
}} />
```
```

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

### Creating a Custom Renderer Plugin (JPG)

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Define a custom renderer component for specific file types like JPG. Export the component and specify its supported file types and rendering weight.

```tsx
import React from "react";
import { DocRenderer } from "../../types";

// Be sure that Renderer correctly uses type DocRenderer
const JPGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
  if (!currentDocument) return null;

  return (
    <div id="jpg-renderer">
      <img id="jpg-img" src={currentDocument.fileData as string} />
    </div>
  );
};

export default JPGRenderer;

// List the MIME types that this renderer will respond to
JPGRenderer.fileTypes = ["jpg", "jpeg", "image/jpg", "image/jpeg"];

// If you have more than one renderer for the same MIME type, use weight. higher is more preferable.
// Included renderers have a weight of zero
JPGRenderer.weight = 1;
```

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

### ITheme Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Defines theme colors and scrollbar settings for the viewer.

```APIDOC
## ITheme Interface

### Description
Specifies theme customization options, including colors and scrollbar behavior.

### Fields
- **primary?** (string) - Optional - Primary theme color.
- **secondary?** (string) - Optional - Secondary theme color.
- **tertiary?** (string) - Optional - Tertiary theme color.
- **text_primary?** (string) - Optional - Primary text color.
- **text_secondary?** (string) - Optional - Secondary text color.
- **text_tertiary?** (string) - Optional - Tertiary text color.
- **disableThemeScrollbar?** (boolean) - Optional - If true, disables theme-specific scrollbars.
```

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

### Theming

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Customize the appearance of the document viewer by providing a theme object with various color properties.

```APIDOC
## Themed

You can provide a theme object with one or all of the available properties.

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

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

### Using IDocument Interface with React Doc Viewer

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Demonstrates how to use the IDocument interface to pass multiple documents to the DocViewer component. Supports remote URLs, local files via require, and blob URLs from file inputs, with optional file type specification.

```tsx
import DocViewer, { DocViewerRenderers, IDocument } from "react-doc-viewer";

function DocumentManager() {
  // Full IDocument interface usage
  const documents: IDocument[] = [
    // Remote URL - type auto-detected from response headers
    { uri: "https://example.com/report.pdf" },

    // Remote URL with explicit file type
    {
      uri: "https://api.example.com/files/12345",
      fileType: "pdf",
    },

    // Local file using require
    { uri: require("./assets/presentation.pptx") },

    // Blob URL from file input
    {
      uri: URL.createObjectURL(fileInputElement.files[0]),
      fileType: "docx",
    },
  ];

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

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

### IHeaderConfig Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Configuration options for the viewer's header.

```APIDOC
## IHeaderConfig Interface

### Description
Defines settings for customizing the header of the document viewer.

### Fields
- **disableHeader?** (boolean) - Optional - If true, the header is completely disabled.
- **disableFileName?** (boolean) - Optional - If true, the file name is hidden in the header.
- **retainURLParams?** (boolean) - Optional - If true, URL parameters are retained.
- **overrideComponent?** (IHeaderOverride) - Optional - A custom React element to override the default header.
```

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

### Basic Usage of react-doc-viewer

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Use the DocViewer component with an array of document objects, each containing a URI to a file. Local files can be required directly.

```tsx
import DocViewer from "react-doc-viewer";

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

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

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

### IConfig Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Configuration options for the document viewer.

```APIDOC
## IConfig Interface

### Description
Configuration object for customizing the behavior and appearance of the document viewer.

### Fields
- **header?** (IHeaderConfig) - Optional - Configuration for the header component.
```

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

### Applying a Theme to DocViewer

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Provide a theme object to customize the appearance of the DocViewer. You can specify colors for primary, secondary, tertiary elements, and text.

```jsx
<DocViewer
  documents={docs}
  theme={{
    primary: "#5296d8",
    secondary: "#ffffff",
    tertiary: "#5296d899",
    text_primary: "#ffffff",
    text_secondary: "#5296d8",
    text_tertiary: "#00000099",
    disableThemeScrollbar: false,
  }}
/>
```

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

### IMainState Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Represents the main state of the document viewer.

```APIDOC
## IMainState Interface

### Description
Defines the core state management object for the `react-doc-viewer`.

### Fields
- **currentFileNo** (number) - The index of the currently displayed document.
- **documents** (IDocument[]) - An array of documents to be displayed.
- **documentLoading?** (boolean) - Optional - Indicates if a document is currently being loaded.
- **currentDocument?** (IDocument) - Optional - The currently active document object.
- **rendererRect?** (DOMRect) - Optional - The bounding rectangle for the renderer.
- **config?** (IConfig) - Optional - The configuration object for the viewer.
```

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

### Importing Individual Renderers

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Import specific renderers to reduce bundle size when only certain file types need to be supported. Available renderers include PDF, PNG, and JPG.

```tsx
import DocViewer, { PDFRenderer, PNGRenderer, JPGRenderer } from "react-doc-viewer";

function PDFOnlyViewer() {
  const docs = [
    { uri: "https://example.com/report.pdf" },
    { uri: "https://example.com/photo.png" },
  ];

  return (
    <DocViewer
      documents={docs}
      pluginRenderers={[PDFRenderer, PNGRenderer, JPGRenderer]}
    />
  );
}

// Available individual renderers:
// BMPRenderer, HTMLRenderer, JPGRenderer, MSDocRenderer,
// MSGRenderer, PDFRenderer, PNGRenderer, TIFFRenderer, TXTRenderer

```

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

### Registering a Custom Renderer Plugin

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Update the main plugin index file to import and export your new custom renderer as part of the DocViewerRenderers array.

```typescript
// ...
import JPGRenderer from "./jpg";

export const DocViewerRenderers = [
  // ...
  JPGRenderer,
];
```

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

### Custom File Loader

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Implement a custom file loader to control how files are loaded, allowing for pre-processing or alternative loading mechanisms.

```APIDOC
## Custom File Loader

If you need to prevent the actual loading of the file by `react-doc-viewer`.
you can decorate your custom renderer with a callback to do as you wish. e.g. Load the file yourself 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();
  });
};
```
```

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

### Configuring DocViewer Header Options

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Customize the header behavior of the DocViewer by providing a config object. Options include disabling the header, file name display, and retaining URL parameters.

```jsx
<DocViewer documents={docs} config={{
 header: {
  disableHeader: false,
  disableFileName: false,
  retainURLParams: false
 }
}} />
```

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

### Styling

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Apply custom styles to the DocViewer component using CSS classes, inline styles, or styled-components.

```APIDOC
## Styling

Any styling applied to the `<DocViewer>` component, is directly applied to the main `div` container.

#### - CSS Class

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

#### - CSS Class Default Override

Each component / div already has a DOM id that can be used to style any part of the document viewer.

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

#### - React Inline

```xml
<DocViewer documents={docs} style={{width: 500, height: 500}} />
```

#### - StyledComponent

```tsx
import styled from "styled-components";
//...
<MyDocViewer documents={docs} />;
//...
const MyDocViewer = styled(DocViewer)`
  border-radius: 10px;
`;
```
```

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

### DocViewer Props

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

API documentation for the DocViewer component's props, including documents, styling, configuration, theming, and plugins.

```APIDOC
## API

---

### `DocViewer props`

| name             | type                            |
| ---------------- | ------------------------------- |
| documents        | [`IDocument[]`](#idocument)     |
| className?       | `string`                        |
| style?           | `React.CSSProperties`           |
| config?          | [`IConfig`](#iconfig)           |
| theme?           | [`ITheme`](#itheme)             |
| pluginRenderers? | [`DocRenderer[]`](#docrenderer) |
```

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

### FileLoaderComplete Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Callback interface for signaling file loading completion.

```APIDOC
## FileLoaderComplete Interface

### Description
An interface representing the callback function used to signal the completion of file loading.

### Fields
- **fileReader** (FileReader) - The `FileReader` object used for loading the file.
```

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

### Basic DocViewer Component Usage

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Renders an interactive document viewer with navigation between documents and appropriate rendering for each file type. Supports URL-based and local file sources.

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

function App() {
  const docs = [
    { uri: "https://example.com/document.pdf" },
    { uri: "https://example.com/spreadsheet.xlsx" },
    { uri: require("./local-files/image.png") },
    { uri: "https://example.com/presentation.pptx", fileType: "pptx" },
  ];

  return (
    <DocViewer
      documents={docs}
      pluginRenderers={DocViewerRenderers}
      style={{ width: 800, height: 600 }}
      className="my-doc-viewer"
    />
  );
}

```

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

### IDocument Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Represents a document to be displayed by the viewer.

```APIDOC
## IDocument Interface

### Description
Represents a document object that can be rendered by the `react-doc-viewer`.

### Fields
- **uri** (string) - Required - The URI of the document.
- **fileType?** (string) - Optional - The MIME type of the file.
- **fileData?** (string | ArrayBuffer) - Optional - Internal use only; ignored if passed via props.
```

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

### Custom File Loader Logic

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Implement custom file loading logic by decorating a renderer with a fileLoader callback. Ensure fileLoaderComplete() is called upon completion to remove the loading animation.

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

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

### Utilize Built-in File Loaders

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Use provided file loader functions like dataURLFileLoader, arrayBufferFileLoader, textFileLoader, and binaryStringFileLoader within custom renderers for efficient data handling. These loaders specify how file data is read.

```tsx
import {
  dataURLFileLoader,
  arrayBufferFileLoader,
  textFileLoader,
  binaryStringFileLoader,
  FileLoaderFuncProps,
} from "react-doc-viewer";
import { DocRenderer } from "react-doc-viewer";

// Using built-in file loaders in custom renderers
const MyImageRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
  if (!currentDocument) return null;
  return <img src={currentDocument.fileData as string} alt="document" />;
};

MyImageRenderer.fileTypes = ["webp", "image/webp"];
MyImageRenderer.weight = 1;
// dataURLFileLoader reads file as base64 data URL (default for images)
MyImageRenderer.fileLoader = dataURLFileLoader;

const MyBinaryRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
  // Process ArrayBuffer data
  if (!currentDocument?.fileData) return null;
  const buffer = currentDocument.fileData as ArrayBuffer;
  return <div>Binary data size: {buffer.byteLength} bytes</div>;
};

MyBinaryRenderer.fileTypes = ["bin"];
MyBinaryRenderer.weight = 1;
// arrayBufferFileLoader reads file as ArrayBuffer (for binary processing)
MyBinaryRenderer.fileLoader = arrayBufferFileLoader;

// Available file loaders:
// dataURLFileLoader - Returns base64 encoded data URL string
// arrayBufferFileLoader - Returns ArrayBuffer for binary data
// textFileLoader - Returns plain text string
// binaryStringFileLoader - Returns binary string

// FileLoaderFuncProps interface:
// documentURI: string - The URI of the document to load
// signal: AbortSignal - For cancelling in-progress fetches
// fileLoaderComplete: (fileReader?: FileReader) => void - Call when loading is done

```

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

### Using Included Renderers in react-doc-viewer

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Import and use DocViewerRenderers to include all built-in renderers, or import and use individual renderers like PDFRenderer and PNGRenderer.

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

<DocViewer
  pluginRenderers={DocViewerRenderers}
  {/* ... */}
/>;
```

```tsx
import DocViewer, { PDFRenderer, PNGRenderer } from "react-doc-viewer";

<DocViewer
  pluginRenderers={[PDFRenderer, PNGRenderer]}
  {/* ... */}
/>;
```

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

### Theme Configuration for DocViewer

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Customize the visual appearance of the document viewer using theme properties for colors and scrollbar styling. Properties include primary, secondary, tertiary colors, and text colors.

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

function ThemedViewer() {
  const docs = [{ uri: "https://example.com/document.pdf" }];

  return (
    <DocViewer
      documents={docs}
      pluginRenderers={DocViewerRenderers}
      theme={{
        primary: "#5296d8",
        secondary: "#ffffff",
        tertiary: "#5296d899",
        text_primary: "#ffffff",
        text_secondary: "#5296d8",
        text_tertiary: "#00000099",
        disableThemeScrollbar: false,
      }}
    />
  );
}

// Theme properties:
// primary - Main accent color
// secondary - Background color
// tertiary - Secondary accent (scrollbar, highlights)
// text_primary - Primary text color
// text_secondary - Secondary text color
// text_tertiary - Tertiary text color
// disableThemeScrollbar - Use browser default scrollbar if true

```

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

### FileLoaderFuncProps Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Props passed to the FileLoaderFunction.

```APIDOC
## FileLoaderFuncProps Interface

### Description
Properties provided to the `FileLoaderFunction` for loading document data.

### Fields
- **documentURI** (string) - The URI of the document to load.
- **signal** (AbortSignal) - An `AbortSignal` to allow cancellation of the loading process.
- **fileLoaderComplete** (FileLoaderComplete) - A callback function to signal that file loading is complete.
```

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

### Supplying Custom Renderer to DocViewer

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Provide your custom renderer to the DocViewer component via the pluginRenderers prop within an array.

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

<DocViewer
  pluginRenderers={[MyCustomPNGRenderer]}
  documents={
    [
      // ...
    ]
  }
/>;
```

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

### Styling DocViewer with Styled Components

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Extend the DocViewer component using styled-components to apply custom styles like border-radius.

```tsx
import styled from "styled-components";
//...
<MyDocViewer documents={docs} />;
//...
const MyDocViewer = styled(DocViewer)`
  border-radius: 10px;
`;
```

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

### DocRendererProps Interface

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Props passed to the DocRenderer component.

```APIDOC
## DocRendererProps Interface

### Description
Props required by the `DocRenderer` component.

### Fields
- **mainState** (IMainState) - The main state object of the document viewer.
```

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

### Styling DocViewer with CSS Class

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Apply custom CSS classes to the main div container of the DocViewer component for external styling.

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

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

### Custom Header Configuration for DocViewer

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Configure the header bar to show/hide elements or completely override it with a custom component. The custom header can display document navigation and state.

```tsx
import DocViewer, { DocViewerRenderers, IHeaderOverride } from "react-doc-viewer";

function ConfiguredViewer() {
  const docs = [
    { uri: "https://example.com/doc1.pdf" },
    { uri: "https://example.com/doc2.pdf" },
  ];

  // Custom header component
  const myHeader: IHeaderOverride = (state, previousDocument, nextDocument) => {
    if (!state.currentDocument) return null;

    return (
      <div style={{ display: "flex", justifyContent: "space-between", padding: 10 }}>
        <span>
          Document {state.currentFileNo + 1} of {state.documents.length}
        </span>
        <div>
          <button onClick={previousDocument} disabled={state.currentFileNo === 0}>
            Previous
          </button>
          <button
            onClick={nextDocument}
            disabled={state.currentFileNo >= state.documents.length - 1}
          >
            Next
          </button>
        </div>
      </div>
    );
  };

  return (
    <DocViewer
      documents={docs}
      pluginRenderers={DocViewerRenderers}
      config={{
        header: {
          disableHeader: false,
          disableFileName: false,
          retainURLParams: false,
          overrideComponent: myHeader,
        },
      }}
    />
  );
}

// IHeaderOverride callback parameters:
// state: IMainState - Current viewer state (currentFileNo, documents, currentDocument, etc.)
// previousDocument: () => void - Navigate to previous document
// nextDocument: () => void - Navigate to next document

```

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

### Create Custom CSV Renderer

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Define a custom renderer component for CSV files. Ensure to specify supported file types and optionally provide a custom file loader. Higher weight gives the renderer priority.

```tsx
import React from "react";
import DocViewer, { DocRenderer, DocRendererProps } from "react-doc-viewer";

// Define a custom renderer component
const MyCustomCSVRenderer: DocRenderer = ({
  mainState: { currentDocument },
}: DocRendererProps) => {
  if (!currentDocument || !currentDocument.fileData) return null;

  const csvContent = currentDocument.fileData as string;
  const rows = csvContent.split("\n").map((row) => row.split(","));

  return (
    <div id="csv-renderer" style={{ padding: 20, overflow: "auto" }}>
      <table style={{ borderCollapse: "collapse", width: "100%" }}>
        <tbody>
          {rows.map((row, i) => (
            <tr key={i}>
              {row.map((cell, j) => (
                <td key={j} style={{ border: "1px solid #ddd", padding: 8 }}>
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// Required: Define supported file types
MyCustomCSVRenderer.fileTypes = ["csv", "text/csv"];

// Required: Set renderer weight (higher = higher priority)
MyCustomCSVRenderer.weight = 1;

// Optional: Custom file loader
MyCustomCSVRenderer.fileLoader = ({ documentURI, signal, fileLoaderComplete }) => {
  fetch(documentURI, { signal })
    .then((res) => res.text())
    .then((text) => {
      const fileReader = new FileReader();
      fileReader.onload = () => fileLoaderComplete(fileReader);
      fileReader.readAsText(new Blob([text]));
    });
};

function App() {
  return (
    <DocViewer
      documents={[{ uri: "https://example.com/data.csv" }]}
      pluginRenderers={[MyCustomCSVRenderer]}
    />
  );
}

```

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

### Integrate with Styled Components

Source: https://context7.com/alcumus/react-doc-viewer/llms.txt

Extend DocViewer with styled-components for advanced CSS customization. Target specific DOM elements using their IDs for precise styling. The 'style' prop can also be used for inline styles.

```tsx
import styled from "styled-components";
import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

const StyledDocViewer = styled(DocViewer)`
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  #header-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  #pdf-renderer {
    background-color: #f5f5f5;
  }

  #pdf-controls {
    background-color: #333;
  }
`;

function App() {
  const docs = [{ uri: "https://example.com/document.pdf" }];

  return (
    <StyledDocViewer
      documents={docs}
      pluginRenderers={DocViewerRenderers}
      style={{ height: 500 }}
    />
  );
}

// DOM IDs available for CSS targeting:
// #react-doc-viewer - Main container
// #header-bar - Header with file name and navigation
// #pdf-renderer - PDF document container
// #pdf-controls - PDF zoom/page controls
// #msdoc-renderer - MS Office document container
// #png-img, #jpg-img, #bmp-img - Image elements

```

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

### DocRenderer Type

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Represents a functional component for rendering specific document types.

```APIDOC
## DocRenderer Type

### Description
A functional component that extends `React.FC` and is responsible for rendering specific file types.

### Props
- **mainState** (IMainState) - The current main state of the viewer.

### Fields
- **fileTypes** (string[]) - An array of file extensions this renderer supports.
- **weight** (number) - A number indicating the priority of this renderer.
- **fileLoader?** (FileLoaderFunction | null | undefined) - An optional function to load file data.
```

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

### Inline Styling DocViewer

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Apply inline styles directly to the DocViewer component to control its dimensions or other CSS properties.

```jsx
<DocViewer documents={docs} style={{width: 500, height: 500}} />
```

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

### Overriding Default Styles with CSS IDs

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Target specific elements within the DocViewer using their DOM IDs for detailed CSS styling, such as modifying the header bar background.

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

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

### IHeaderOverride Type

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Type definition for a custom header override component.

```APIDOC
## IHeaderOverride Type

### Description
Represents a function that returns a custom React element to override the default header. It receives the main state and navigation functions.

### Signature
`() => ReactElement<any, any> | null`

### Parameters
- **state** (IMainState) - The current main state of the viewer.
- **previousDocument** - Function to navigate to the previous document.
- **nextDocument** - Function to navigate to the next document.

### Returns
A React element or null to render the custom header.
```

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

### Overriding Header Component

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Customize the header component by providing an override function that returns a React element, with access to state and navigation functions.

```APIDOC
## Overriding Header Component

You can pass a callback function to `config.header.overrideComponent` that returns a React Element. The function's parameters will be populated and usable, this function will also be re-called whenever the mainState updates.
Parameters include the state object from the main component, and document navigation functions for `previousDocument` and `nextDocument`.

Example:

```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;
      },
    },
  }
/>
```
```

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

### Overriding the Header Component

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Provide a callback function to `config.header.overrideComponent` to render a custom header. This function receives the main state and navigation functions.

```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;
      },
    },
  }
/>
```

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

### FileLoaderFunction Type

Source: https://github.com/alcumus/react-doc-viewer/blob/master/README.md

Type definition for a function that loads file data.

```APIDOC
## FileLoaderFunction Type

### Description
A function signature for loading file data asynchronously.

### Signature
`(props: FileLoaderFuncProps) => void`

### Parameters
- **props** (FileLoaderFuncProps) - An object containing document URI, abort signal, and a completion callback.
```

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