react-doc-viewer
v0.1.15TypeScript
Document viewer for react. Renders online/local documents.
0/weekUpdated 3 months agoISCUnpacked: 142.8 KB
Published by Matthew Mogford
npm install react-doc-viewerreact-doc-viewer
Contents
- Current Renderable File Types
- Installation
- Core
- Usage
- Basic
- Included Renderers
- Custom Renderer
- Themed
- Styling
- CSS Class
- CSS Class Default Override
- React Inline
- StyledComponent
- Config
- Contributing
- Creating a Renderer Plugin
- Overriding Header Component
- API
Current Renderable File Types
| Extension | MIME Type | Available |
| --------- | ---------------------------------------------------------------------------------- | --------- |
| bmp | image/bmp | ✓ |
| doc | application/msword | ✓ |
| docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document | ✓ |
| htm | text/htm | ✓ |
| html | text/html | ✓ |
| jpg | image/jpg | ✓ |
| jpeg | image/jpeg | ✓ |
| pdf | application/pdf | ✓ |
| png | image/png | ✓ |
| ppt | application/vnd.ms-powerpoint | ✓ |
| pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation | ✓ |
| tiff | image/tiff | ✓ |
| txt | text/plain | ✓ |
| xls | application/vnd.ms-excel | ✓ |
| xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | ✓ |
Installation
$3
``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._
$3
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
}
`
$3
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";
{/ ... /}
/>;
`
$3
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";
documents={
[
// ...
]
}
/>;
`
$3
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();
});
};
$3
You can provide a theme object with one or all of the available properties.
`xml`
theme={{
primary: "#5296d8",
secondary: "#ffffff",
tertiary: "#5296d899",
text_primary: "#ffffff",
text_secondary: "#5296d8",
text_tertiary: "#00000099",
disableThemeScrollbar: false,
}}
/>
$3
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;;`
$3
You can provide a config object, which configures parts of the component as required.
`xml`
disableHeader: false,
disableFileName: false,
retainURLParams: false
}
}} />
Contributing
$3
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.previousDocument
Parameters include the state object from the main component, and document navigation functions for and nextDocument.
Example:
`tsx
const myHeader: IHeaderOverride = (state, previousDocument, nextDocument) => {
if (!state.currentDocument || state.config?.header?.disableFileName) {
return null;
}
return (
<>
{state.currentDocument.uri || ""}
disabled={state.currentFileNo === 0}
>
Previous Document
disabled={state.currentFileNo >= state.documents.length - 1}
>
Next Document
);
};
documents={
{
/**/
}
}
config={{
header: {
overrideComponent: myHeader;
},
},
}
/>
`
API
---
$3
| name | type |
| ---------------- | ------------------------------- |
| documents | [IDocument[]](#idocument) |string
| className? | |React.CSSProperties
| style? | |IConfig
| config? | |ITheme
| theme? | |DocRenderer[]
| pluginRenderers? | [](#docrenderer) |
---
$3
| name | type |
| --------- | -------- |
| uri | string |string
| fileType? | |string | ArrayBuffer
| fileData? | - Used Internally - Ignored if passed into props |
---
$3
| name | type |
| ------- | --------------------------------- |
| header? | IHeaderConfig |
---
$3
| name | type |
| ------------------ | ------------------------------------- |
| disableHeader? | boolean |boolean
| disableFileName? | |boolean
| retainURLParams? | |IHeaderOverride
| overrideComponent? | |
---
$3
| name | type |
| ---------------- | --------------------------- |
| state | IMainState |
| previousDocument | () => void |() => void
| nextDocument | |returns
| | ReactElement |
---
$3
| name | type |
| ---------------------- | --------- |
| primary? | string |string
| secondary? | |string
| tertiary? | |string
| text_primary? | |string
| text_secondary? | |string
| text_tertiary? | |boolean
| disableThemeScrollbar? | |
---
$3
| name | type |
| ----------- | --------------------------------------------- |
| fileTypes | string[] |number
| weight | |FileLoaderFunction
| fileLoader? | | null | undefined |
---
$3
(props: FileLoaderFuncProps) => void
---
$3
| name | type |
| ------------------ | ------------------------------------------- |
| documentURI | string |AbortSignal
| signal | |FileLoaderComplete
| fileLoaderComplete | |
---
$3
| name | type |
| ---------- | ------------ |
| fileReader | FileReader |
---
$3
| name | type |
| --------- | --------------------------- |
| mainState | IMainState |
---
$3
| name | type |
| ---------------- | --------------------------- |
| currentFileNo | number |
| documents | [IDocument[]](#idocument) |IDocument
| documentLoading? | boolean |
| currentDocument? | |IConfig` |
| rendererRect? | DOMRect |
| config? |
---