enoviq-react-document-viewer/README.md

Custom React & Next.js compatible document viewer package

# 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.

```jsx
<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

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



## Complete Example

```jsx
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

```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