@cyntler/react-doc-viewer

A custom renderer is a component that implements the DocRenderer interface. It must define fileTypes (an array of strings/MIME types) and a weight (number). You can also define a fileLoader to handle custom pre-fetching logic.

import React from "react";
import DocViewer from "@cyntler/react-doc-viewer";

const MyCustomPNGRenderer: DocRenderer = ({
  mainState: { currentDocument },
}) => {
  if (!currentDocument) return null;

  return (
    <div id="my-png-renderer">
      <img id="png-img" src={currentDocument.fileData as string} />
    </div>
  );
};

MyCustomPNGRenderer.fileTypes = ["png", "image/png"];
MyCustomPNGRenderer.weight = 1;

// To use it:
<DocViewer
  pluginRenderers={[MyCustomPNGRenderer]}
  documents={[
    // ...
  ]}
/>

Install the package using npm or yarn to use the React file viewer in your project.

npm i @cyntler/react-doc-viewer
# or
yarn add @cyntler/react-doc-viewer

The library requires a specific CSS file for correct rendering (e.g., for PDF files). Import this at the beginning of your application or where you use the component.

import "@cyntler/react-doc-viewer/dist/index.css";

Use the language prop to translate the library's UI. Pass a locale string (e.g., "pl" for Polish) corresponding to the JSON files in src/locales.

<DocViewer documents={docs} language="pl" />

The config object allows you to customize various aspects of the DocViewer component, including header behavior, CSV parsing, and PDF viewing settings.

<DocViewer
  documents={docs}
  config={{
    header: {
      disableHeader: false,
      disableFileName: false,
      retainURLParams: false,
    },
    csvDelimiter: ",", // "," as default
    pdfZoom: {
      defaultZoom: 1.1, // 1 as default
      zoomJump: 0.2, // 0.1 as default
    },
    pdfVerticalScrollByDefault: true, // false as default
  }}
/>

You can style the component using className, inline style props, or styled-components. Additionally, you can target internal elements using their DOM IDs (e.g., #react-doc-viewer #header-bar).

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

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

// Styled Components
import styled from "styled-components";
const MyDocViewer = styled(DocViewer)`
  border-radius: 10px;
`;

By default, the library uses a HEAD request to guess Content-Type. Use prefetchMethod to change this (e.g., to GET for AWS URLs) and requestHeaders to provide authentication tokens or custom headers.

const headers = {
  "X-Access-Token": "1234567890",
  "My-Custom-Header": "my-custom-value",
};

<DocViewer 
  documents={docs} 
  prefetchMethod="GET" 
  requestHeaders={headers} 
/>

Pass a theme object to customize the visual appearance of the viewer. Available properties include primary, secondary, tertiary, textPrimary, textSecondary, textTertiary, and disableThemeScrollbar.

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

To use DocViewer, provide an array of document objects to the documents prop. Each object must contain a uri (a remote URL or a local file path). You must also provide pluginRenderers (typically DocViewerRenderers) to enable file rendering.

import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import "@cyntler/react-doc-viewer/dist/index.css";

function App() {
  const docs = [
    { uri: "https://url-to-my-pdf.pdf" }, // Remote file
    { uri: require("./example-files/pdf.pdf") }, // Local File
  ];

  return <DocViewer documents={docs} pluginRenderers={DocViewerRenderers} />;
}

To display files uploaded by a user (Blobs), map the File objects to document objects using window.URL.createObjectURL(file) for the uri.

const DocViewerWithInputApp = () => {
  const [selectedDocs, setSelectedDocs] = useState<File[]>([]);

  return (
    <>
      <input
        type="file"
        accept=".pdf"
        multiple
        onChange={(el) =>
          el.target.files?.length &&
          setSelectedDocs(Array.from(el.target.files))
        }
      />
      <DocViewer
        documents={selectedDocs.map((file) => ({
          uri: window.URL.createObjectURL(file),
          fileName: file.name,
        }))}
        pluginRenderers={DocViewerRenderers}
      />
    </>
  );
};