Custom React & Next.js compatible document viewer package
npm install enoviq-react-document-viewerEnoviq React Document Viewer is a package that allows you to easily add document viewer functionality to your React applications.
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.
`
| 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 |
The following file types are supported by Enoviq React Document Viewer.
| File Type | Base64 | URL | Blob |
| ---------------- | ------ | --- | ---- |
| PDF | ✔ | ✔ | ✔ |
| Image | ✔ | ✔ | ✔ |
| Video | ✔ | ✔ | ✔ |
| Office Documents | ✔ | ✔ | ✔ |
| CSV, TXT, etc. | ✔ | ✔ | ✔ |
You can pass a custom widget to replace the default icon.
`jsx`
customWidget={ Custom Icon }
/>
make a useState variable to handle the state.
pass open and onClose for
` Custom header contentjsx`
openFile={isOpen}
onClose={handleCloseDocument}
customWidget={
<>
Document Preview
}
/>
`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 (
{/ Document Preview /}
openFile={isOpen}
onClose={handleCloseDocument}
customWidget={
<>
Custom header content
export default App;
``
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);
}
`
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