react-doc-viewer
Contents
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 | ✓ |
application/pdf | ✓ |
|
png | image/png | ✓ |
ppt | application/vnd.ms-powerpoint | ✓ |
pptx | applicatiapplication/vnd.openxmlformats-officedocument.presentationml.presentation | ✓ |
tiff | image/tiff | ✓ |
txt | text/plain | ✓ |
xls | application/vnd.ms-excel | ✓ |
xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | ✓ |
Installation
Core
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.
;
Included Renderers
To use the included renderers.
DocViewerRenderers
is an Array of all the included renderers.
; ;
Or you can import individual renderers.
; ;
Custom Renderer
To create a custom renderer, that will just exist for your project.
;; ; MyCustomPNGRenderer.fileTypes = ;MyCustomPNGRenderer.weight = 1;
And supply it to DocViewer > pluginRenderers inside an Array
.
; ;
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.
MyCustomPNGRenderer.fileLoader = ;
Themed
You can provide a theme object with one or all of the available properties.
Styling
Any styling applied to the <DocViewer>
component, is directly applied to the main div
container.
- CSS Class
- CSS Class Default Override
Each component / div already has a DOM id that can be used to style any part of the document viewer.
- React Inline
- StyledComponent
;//...;//...;
Config
You can provide a config object, which configures parts of the component as required.
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
;; // Be sure that Renderer correctly uses type DocRenderer; ; // List the MIME types that this renderer will respond toJPGRenderer.fileTypes = ; // If you have more than one renderer for the same MIME type, use weight. higher is more preferable.// Included renderers have a weight of zeroJPGRenderer.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
.
// ...; ;
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:
API
DocViewer props
name | type |
---|---|
documents | IDocument[] |
className? | string |
style? | React.CSSProperties |
config? | IConfig |
theme? | ITheme |
pluginRenderers? | DocRenderer[] |
IDocument
name | type |
---|---|
uri | string |
fileType? | string |
fileData? | string | ArrayBuffer - Used Internally - Ignored if passed into props |
IConfig
name | type |
---|---|
header? | IHeaderConfig |
IHeaderConfig
name | type |
---|---|
disableHeader? | boolean |
disableFileName? | boolean |
retainURLParams? | boolean |
overrideComponent? | IHeaderOverride |
IHeaderOverride
() => ReactElement<any, any> | null
name | type |
---|---|
state | IMainState |
previousDocument | () => void |
nextDocument | () => void |
returns |
ReactElement<any, any> | null |
ITheme
name | type |
---|---|
primary? | string |
secondary? | string |
tertiary? | string |
text_primary? | string |
text_secondary? | string |
text_tertiary? | string |
disableThemeScrollbar? | boolean |
DocRenderer
extends React.FC<DocRendererProps
>
name | type |
---|---|
fileTypes | string[] |
weight | number |
fileLoader? | FileLoaderFunction | null | undefined |
FileLoaderFunction
(props: FileLoaderFuncProps
) => void
FileLoaderFuncProps
name | type |
---|---|
documentURI | string |
signal | AbortSignal |
fileLoaderComplete | FileLoaderComplete |
FileLoaderComplete
name | type |
---|---|
fileReader | FileReader |
DocRendererProps
name | type |
---|---|
mainState | IMainState |
IMainState
name | type |
---|---|
currentFileNo | number |
documents | IDocument[] |
documentLoading? | boolean |
currentDocument? | IDocument |
rendererRect? | DOMRect |
config? | IConfig |