## Installation
### Core
```bash
npm i react-doc-viewer
# or
yarn add react-doc-viewer
```
## Usage
> **Warning** - _By default the component height will expand and contract to the current loaded file. The width will expand to fill the parent._
### Basic
DocViewer requires at least an array of document objects to function.
Each document object must have a uri to a file, either a url that returns a file or a local file.
```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 ;
}
```
### Included Renderers
To use the included renderers.
`DocViewerRenderers` is an Array of all the included renderers.
```tsx
import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
;
```
Or you can import individual renderers.
```tsx
import DocViewer, { PDFRenderer, PNGRenderer } from "react-doc-viewer";
;
```
### Custom Renderer
To create a custom renderer, that will just exist for your project.
```tsx
import React from "react";
import DocViewer from "react-doc-viewer";
const MyCustomPNGRenderer: DocRenderer = ({
mainState: { currentDocument },
}) => {
if (!currentDocument) return null;
return (
);
};
MyCustomPNGRenderer.fileTypes = ["png", "image/png"];
MyCustomPNGRenderer.weight = 1;
```
And supply it to DocViewer > pluginRenderers inside an `Array`.
```tsx
import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
;
```
### 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();
});
};
```
### Themed
You can provide a theme object with one or all of the available properties.
```xml
```
### Styling
Any styling applied to the `` component, is directly applied to the main `div` container.
#### - CSS Class
```xml
```
#### - 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
```
#### - StyledComponent
```tsx
import styled from "styled-components";
//...
;
//...
const MyDocViewer = styled(DocViewer)`
border-radius: 10px;
`;
```
### Config
You can provide a config object, which configures parts of the component as required.
```xml
```
## 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 (
);
};
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,
];
```
## 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 (
<>