@iamjariwala/react-doc-viewer 0.2.1 → 1.1.0

package/README.md

@@ -23,7 +23,7 @@ Most React document viewers only handle PDFs or require expensive commercial lic
 | Feature | @iamjariwala/react-doc-viewer | react-pdf | @cyntler/react-doc-viewer | react-file-viewer |
 | ------- | :--: | :--: | :--: | :--: |
 | PDF rendering | Yes | Yes | Yes | Yes |
-| Office docs (Word, Excel, PPT) | Yes | -- | Yes | Partial |
+| Office docs (Word, Excel, PPT) | Download card | -- | Yes | Partial |
 | Images (PNG, JPG, GIF, WebP, TIFF, BMP) | Yes | -- | Yes | Partial |
 | Video (MP4) | Yes | -- | Yes | Yes |
 | CSV / TXT / HTML | Yes | -- | Yes | Partial |
@@ -35,7 +35,7 @@ Most React document viewers only handle PDFs or require expensive commercial lic
 | Custom renderers | Yes | -- | Yes | -- |
 | Theming | Yes | -- | Yes | -- |
 | TypeScript | Yes | Yes | Yes | -- |
-| Actively maintained (2024+) | Yes | Yes | -- | -- |
+| Actively maintained (2025+) | Yes | Yes | -- | -- |
 | License | Apache-2.0 | MIT | MIT | MIT |
 
 ---
@@ -50,19 +50,20 @@ Most React document viewers only handle PDFs or require expensive commercial lic
 
 ---
 
-### What's New in v0.2.0
+### What's New in v1.1.0
 
-- **Drag & Drop** -- Drop files directly onto the viewer to add or replace documents
-- **Thumbnail Sidebar** -- Visual page navigation with auto-scroll for PDFs
-- **Annotations** -- Highlight text, freehand draw, and add comments with export support
-- **Page Jump** -- Navigate to any page programmatically via ref or prop
+- **Security: HTML XSS fix** -- HTML renderer now sanitizes content with DOMPurify before rendering
+- **Security: MS Office docs** -- Removed external iframe dependency; Office files now render as download cards with file info
+- **Removed styled-components** -- All styling migrated to plain CSS with CSS custom properties, reducing bundle size
+- **Smaller bundle** -- Removed `styled-components`, `core-js`, and `ajv` dependencies (~300-400KB savings)
+- **CSS custom properties** -- Theming now uses `--rdv-*` CSS variables for full customizability
 
 ## Table of Contents
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
 
-- [Why @iamjariwala/react-doc-viewer?](#why-iamjariwalareact-doc-viewer)
 - [Supported File Types](#supported-file-types)
 - [Live Demo](#live-demo)
 - [Installation](#installation)
@@ -114,16 +115,16 @@ Most React document viewers only handle PDFs or require expensive commercial lic
 | txt | `text/plain` | |
 | htm / html | `text/htm`, `text/html` | |
 | mp4 | `video/mp4` | |
-| doc | `application/msword` | Public URLs only |
-| docx | `application/vnd.openxmlformats-officedocument.wordprocessingml.document` | Public URLs only |
-| xls | `application/vnd.ms-excel` | Public URLs only |
-| xlsx | `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` | Public URLs only |
-| ppt | `application/vnd.ms-powerpoint` | Public URLs only |
-| pptx | `application/vnd.openxmlformats-officedocument.presentationml.presentation` | Public URLs only |
+| doc | `application/msword` | Download card |
+| docx | `application/vnd.openxmlformats-officedocument.wordprocessingml.document` | Download card |
+| xls | `application/vnd.ms-excel` | Download card |
+| xlsx | `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` | Download card |
+| ppt | `application/vnd.ms-powerpoint` | Download card |
+| pptx | `application/vnd.openxmlformats-officedocument.presentationml.presentation` | Download card |
 | odt | `application/vnd.oasis.opendocument.text` | |
 
-> [!IMPORTANT]
-> MS Office documents (doc, docx, xls, xlsx, ppt, pptx) use Microsoft's online viewing service via iframe and **require publicly accessible URLs**.
+> [!NOTE]
+> MS Office documents (doc, docx, xls, xlsx, ppt, pptx) render as download cards showing file name, type, and a download link. No external service or public URL is required.
 
 ## Live Demo
 
@@ -580,24 +581,33 @@ Customize the viewer's appearance with a theme object:
 <DocViewer documents={docs} pluginRenderers={DocViewerRenderers} style={{ width: 500, height: 500 }} />
 ```
 
-**Styled Components:**
+**Override internal elements with CSS classes:**
 
-```tsx
-import styled from "styled-components";
-import DocViewer from "@iamjariwala/react-doc-viewer";
+All internal elements use `.rdv-*` class names that you can target:
 
-const MyDocViewer = styled(DocViewer)`
+```css
+.rdv-container {
   border-radius: 10px;
-`;
+}
+
+.rdv-header-bar {
+  background-color: #faf;
+}
 
-<MyDocViewer documents={docs} />;
+.rdv-pdf-controls {
+  gap: 12px;
+}
 ```
 
-**Override internal elements by DOM ID:**
+**Override CSS custom properties:**
+
+Theming is powered by CSS variables. Override them on the container or globally:
 
 ```css
-#react-doc-viewer #header-bar {
-  background-color: #faf;
+#react-doc-viewer {
+  --rdv-primary: #1a1a2e;
+  --rdv-secondary: #16213e;
+  --rdv-text-primary: #e94560;
 }
 ```
 
@@ -681,7 +691,7 @@ Provide custom headers for authenticated requests:
 Install `@iamjariwala/react-doc-viewer`, import `DocViewer` and `DocViewerRenderers`, pass your PDF URL as a document, and the component handles rendering, zoom, pagination, and page navigation automatically. See [Quick Start](#quick-start).
 
 **Can I view Word, Excel, and PowerPoint files in React?**
-Yes. This library renders `.doc`, `.docx`, `.xls`, `.xlsx`, `.ppt`, and `.pptx` files using Microsoft's online viewing service. The files must be accessible via a public URL.
+Yes. This library recognizes `.doc`, `.docx`, `.xls`, `.xlsx`, `.ppt`, and `.pptx` files and renders them as download cards showing file name, type, and a download link. No external service or public URL is required.
 
 **Does it support annotations and highlighting?**
 Yes. Enable annotations via config to get text highlighting, freehand drawing, comments, and an eraser tool. Annotations can be exported as JSON and pre-loaded from saved data. See [Annotations](#annotations).

package/dist/components/common/Button.d.ts

@@ -1,16 +1,13 @@
-import { IStyledProps } from '../..';
+import { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
 
-interface ButtonProps extends IStyledProps {
-    disabled?: boolean;
-}
-export declare const ButtonPrimaryStyle: import('styled-components').RuleSet<object>;
-export declare const ButtonSecondaryStyle: import('styled-components').RuleSet<object>;
-export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;
-export declare const LinkButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const ButtonPrimary: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ButtonProps> & ButtonProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string;
-export declare const ButtonSecondary: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ButtonProps> & ButtonProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string;
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    className?: string;
+};
+export declare const Button: FC<ButtonProps>;
+export declare const ButtonPrimary: FC<ButtonProps>;
+export declare const ButtonSecondary: FC<ButtonProps>;
+type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    className?: string;
+};
+export declare const LinkButton: FC<LinkButtonProps>;
 export {};

package/dist/{index-dGGNa2HA.js → index-BRIDmekZ.js}

@@ -1,5 +1,5 @@
-import { c as V, a as br, d as on, p as U, B as ce, g as an } from "./index-Dg8HfAtq.js";
-import { u as fn } from "./url-Dk8Xia2J.js";
+import { c as V, a as br, d as on, p as U, B as ce, g as an } from "./index-BbWLdN1j.js";
+import { u as fn } from "./url-5wjrlwUG.js";
 function un(e, t) {
   for (var r = 0; r < t.length; r++) {
     const n = t[r];