react-doc-viewer

react-doc-viewer

Contents

• Current Renderable File Types
• Installation
• Usage
  
  • Basic
  • Themed
  • Styling
    • CSS Class
    • React Inline
    • StyledComponent
  • Config
• Contributing
  • Creating a Renderer Plugin
• API
• Setup Demo

Current Renderable File Types

MIME Type	Available
application/pdf	✓
image/png	✓
image/jpg, image/jpeg	✓

Installation

 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.

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

Themed

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

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

Styling

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

- CSS Class

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

- React Inline

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

- StyledComponent

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

Config

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

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

Contributing

Creating a Renderer Plugin

Create a new folder inside src/plugins.

e.g. src/plugins/jpg

Inside this folder, create a Renderer React Typescript file.

e.g. JPGRenderer.tsx

Inside JPGRenderer, export a functional component of type DocRenderer

import React from "react";
import { useRecoilValue } from "recoil";
import styled from "styled-components";
import DocViewerState from "../../state";
import { DocRenderer } from "../../types";
import linkRenderResponder from "../../utils/linkRenderResponder";

// Be sure that Renderer correctly uses type DocRenderer
const JPGRenderer: DocRenderer = () => {
  // Fetch the currentDocument loaded from main component state
  const currentDocument = useRecoilValue(DocViewerState.currentDocument);

  if (!currentDocument) return null;

  return (
    <Container id="jpg-renderer">
      <Img id="jpg-img" src={currentDocument.base64Data} />
    </Container>
  );
};

export default JPGRenderer;

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

// If you have more than one renderer for the same MIME type, use priority. 1 is more preferable.
JPGRenderer.priority = 1;

// Add the renderer to an event listener for 'request-document-renderer' from "alcumus-local-events"
linkRenderResponder(JPGRenderer);

If you are creating a renderer for a new MIME type, also update the following files.

Update src/plugins/index.ts with a direct import to your new renderer file. This ensures that the linked event listener is running from the start of component use.

import "./jpg/JPGRenderer";

Update src/types/index.ts with your new MIME type. This should match the array from JPGRenderer.filetypes.

export type FileType =
  | "application/pdf"
  | "image/png"
  | "image/jpg"
  | "image/jpeg";

API

DocViewer props

name	type
documents	IDocument[]
className?	string
style?	React.CSSProperties
config?	IConfig
theme?	ITheme

IDocument

name	type
uri	string
fileType?	FileType - Used Internally
base64Data?	string - Used Internally

IConfig

name	type
header?	IHeaderConfig

IHeaderConfig

name	type
disableHeader?	boolean
disableFileName?	boolean

ITheme

name	type
primary?	string
secondary?	string
tertiary?	string
text_primary?	string
text_secondary?	string
text_tertiary?	string
disableThemeScrollbar?	boolean

DocRenderer

name	type
fileTypes	FileType[]
priority	number

Setup Demo

npm i && npm run start