Enoviq React Document Viewer

Enoviq React Document Viewer is a package that allows you to easily add document viewer functionality to your React applications.

Installation

You can install Enoviq React Document Viewer using npm:

 npm install enoviq-react-document-viewer

or

 yarn add enoviq-react-document-viewer

How to use in your code.

import ENDocumentPreview from "enoviq-react-document-viewer";

then you can call this in component like this.

 <ENDocumentPreview file={"/Images/logo.jpg"} />

Props Configuration

| Prop | Type | Required | Description | | -------------- | ----------- | -------- | --------------------------------------- | | file | string | ✅ | Path to the document file | | openFile | boolean | ❌ | Controls popup visibility | | onClose | function | ❌ | Callback function to close the popup | | customWidget | JSX.Element | ❌ | Custom content to display in the viewer |

Supported File Types

The following file types are supported by Enoviq React Document Viewer.

| File Type | Base64 | URL | Blob | | ---------------- | ------ | --- | ---- | | PDF | ✔ | ✔ | ✔ | | Image | ✔ | ✔ | ✔ | | Video | ✔ | ✔ | ✔ | | Office Documents | ✔ | ✔ | ✔ | | CSV, TXT, etc. | ✔ | ✔ | ✔ |

Custom Icon

You can pass a custom widget to replace the default icon.

<ENDocumentPreview
  file={"/Images/logo.jpg"}
  customWidget={<div> Custom Icon </div>}
/>

Custom trigger to open the popup.

make a useState variable to handle the state. pass open and onClose for

   <ENDocumentPreview
        file="/Images/loginB2.jpg"
        openFile={isOpen}
        onClose={handleCloseDocument}
        customWidget={
            <>
                <h1>Document Preview</h1>
                <p>Custom header content</p>
            </>
        }
    />

Complete Example

import React, { useState } from 'react';
import ENDocumentPreview from "enoviq-react-document-viewer";

function App() {
    const [isOpen, setIsOpen] = useState(false);

    const handleOpenDocument = () => {
        setIsOpen(true);
    };

    const handleCloseDocument = () => {
        setIsOpen(false);
    };

    return (
        <div className="innerBody">
            <div className="dataBody">
                {/* Custom Trigger Button */}
                <button
                    onClick={handleOpenDocument}
                    className="open-document-btn"
                >
                    Open Document
                </button>

                {/* Document Preview */}
                <ENDocumentPreview
                    file="/Images/loginB2.jpg"
                    openFile={isOpen}
                    onClose={handleCloseDocument}
                    customWidget={
                        <>
                            <h1>Document Preview</h1>
                            <p>Custom header content</p>
                        </>
                    }
                />
            </div>
        </div>
    );
}

export default App;

Custom Styling

add this in global css

:global(:root) .body {
  /* Primary Brand */
  --react-doc-viewer-color-primary: #0070f3;
  --react-doc-viewer-color-primary-hover: #0059c1;

  /* Base Colors */
  --react-doc-viewer-color-white: #ffffff;
  --react-doc-viewer-color-black: #000000;

  /* Text Colors */
  --react-doc-viewer-color-text: #111827;
  --react-doc-viewer-color-text-muted: #6b7280;
  --react-doc-viewer-color-text-light: #9ca3af;
  --react-doc-viewer-color-text-dark: #333;
  --react-doc-viewer-color-text-error: #dc2626;
  --react-doc-viewer-color-text-error-muted: #7f1d1d;

  /* Backgrounds */
  --react-doc-viewer-color-bg: #ffffff;
  --react-doc-viewer-color-bg-muted: #f9fafb;
  --react-doc-viewer-color-bg-overlay: rgba(0, 0, 0, 0.5);
  --react-doc-viewer-color-bg-overlay-strong: rgba(0, 0, 0, 0.8);
  --react-doc-viewer-color-bg-card: #fafafa;
  --react-doc-viewer-color-bg-error: #fef2f2;

  /* Borders */
  --react-doc-viewer-color-border: #e5e7eb;
  --react-doc-viewer-color-border-light: #e0e0e0;
  --react-doc-viewer-color-border-error: #fecaca;

  /* Download Section */
  --react-doc-viewer-color-download-bg: #f9fafb;
  --react-doc-viewer-color-download-border: #d1d5db;

  /* States */
  --react-doc-viewer-color-spinner-track: #f3f4f6;
  --react-doc-viewer-color-spinner-active: #3b82f6;

  /* Shadows */
  --react-doc-viewer-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.08);
  --react-doc-viewer-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --react-doc-viewer-shadow-strong: 0 25px 50px rgba(0, 0, 0, 0.3);
}

Best Practices

1. State Management: Always use useState to control the popup state
2. Error Handling: Implement error handling for file loading failures
3. Performance: Consider lazy loading for large documents
4. Accessibility: Ensure proper ARIA labels for screen readers
5. Mobile Responsiveness: Test on different screen sizes