react-doc-viewer-plugins v0.0.14

react-doc-viewer-plugins

Contents

• Current Renderable File Types
• Installation
• Contributing
  • Creating a Renderer Plugin

Current Renderable File Types

Installation

This package is dependent on react-doc-viewer.

Please follow instructions for installation and usage there.

npmjs.com/package/react-doc-viewer

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 {
  DocRenderer,
  DocViewerState,
  linkRenderResponder,
} from "react-doc-viewer";
import { useRecoilValue } from "recoil";

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

  if (!currentDocument) return null;

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

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 new renderer, also 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 { JPGRenderer } from "./plugins/jpg/JPGRenderer";
// ...

export default {
  //...
  JPGRenderer,
};