pdf-tsx 0.7.0 → 0.8.0

package/README.md

@@ -149,10 +149,9 @@ A collapsible icon sidebar. Each panel has an icon button — clicking it toggle
 
 ```tsx
 import { PDFSidebar } from 'pdf-tsx'
-import { FiImage, FiList, FiChevronsLeft } from 'react-icons/fi'
+import { FiImage, FiList } from 'react-icons/fi'
 
 <PDFSidebar
-  collapseIcon={<FiChevronsLeft size={16} />}
   panels={[
     { icon: <FiImage size={18} />, label: 'Thumbnails', content: <PDFThumbnails /> },
     { icon: <FiList size={18} />,  label: 'Outline',    content: <PDFOutline /> },
@@ -160,10 +159,9 @@ import { FiImage, FiList, FiChevronsLeft } from 'react-icons/fi'
 />
 ```
 
-| Prop           | Type             | Description                                                      |
-|----------------|------------------|------------------------------------------------------------------|
-| `panels`       | `SidebarPanel[]` | Array of panels to display                                       |
-| `collapseIcon` | `ReactNode`      | If provided, renders a toggle button at the top of the icon bar to hide the sidebar |
+| Prop     | Type             | Description                  |
+|----------|------------------|------------------------------|
+| `panels` | `SidebarPanel[]` | Array of panels to display   |
 
 **SidebarPanel**
 
@@ -178,24 +176,21 @@ import { FiImage, FiList, FiChevronsLeft } from 'react-icons/fi'
 Use `PDFSidebarToggle` in the toolbar alongside `PDFSidebar`. When the sidebar is open, the collapse button lives inside the sidebar. When collapsed, the expand button appears in the toolbar.
 
 ```tsx
-import { PDFSidebar, PDFSidebarToggle } from 'pdf-tsx'
-import { FiChevronsLeft, FiChevronsRight } from 'react-icons/fi'
+import { PDFSidebar, PDFSidebarToggle, PDFToolbar } from 'pdf-tsx'
+import { FiChevronsLeft, FiChevronsRight, FiMoreHorizontal } from 'react-icons/fi'
 
 <PDFViewer
   sidebar={
-    <PDFSidebar
-      collapseIcon={<FiChevronsLeft size={16} />}
-      panels={[...]}
-    />
+    <PDFSidebar panels={[...]} />
   }
   toolbar={
-    <>
+    <PDFToolbar overflowIcon={<FiMoreHorizontal size={16} />}>
       <PDFSidebarToggle
         collapseIcon={<FiChevronsLeft size={16} />}
         expandIcon={<FiChevronsRight size={16} />}
       />
       {/* other toolbar items */}
-    </>
+    </PDFToolbar>
   }
 />
 ```
@@ -312,7 +307,7 @@ The badge uses `var(--pdf-accent)` and respects `themeOverrides`.
 ```tsx
 import { useState, Suspense, lazy } from 'react'
 import {
-  PDFSidebar, PDFSidebarToggle, PDFToolbar,
+  PDFSidebar, PDFSidebarToggle, PDFToolbar, PDFToolbarItem,
   PDFThumbnails, PDFOutline, PDFSearch,
   PDFZoomControls, PDFPageFit, PDFRotationControl,
   PDFNavigation, PDFDownloadButton, PDFChangeFile,
@@ -350,10 +345,10 @@ function App() {
       <PDFViewer
         file={file}
         workerSrc={workerUrl}
+        defaultFit="width"
         onChangeFile={setFile}
         sidebar={
           <PDFSidebar
-            collapseIcon={<FiChevronsLeft size={16} />}
             panels={[
               { icon: <FiImage size={18} />, label: 'Thumbnails', content: <PDFThumbnails /> },
               { icon: <FiList size={18} />,  label: 'Outline',    content: <PDFOutline /> },
@@ -376,13 +371,17 @@ function App() {
               clearIcon={<FiX size={14} />}
             />
             <PDFZoomControls zoomOutIcon={<FiZoomOut size={16} />} zoomInIcon={<FiZoomIn size={16} />} />
-            <PDFPageFit fitWidthIcon={<FiAlignJustify size={16} />} fitPageIcon={<FiMaximize2 size={16} />} />
             <PDFRotationControl icon={<FiRotateCw size={16} />} />
-            <PDFNavigation prevIcon={<FiChevronLeft size={16} />} nextIcon={<FiChevronRight size={16} />} />
-            <PDFChangeFile icon={<FiFolderPlus size={16} />} />
-            <PDFDownloadButton icon={<FiDownload size={15} />} />
+            <PDFPageFit fitWidthIcon={<FiAlignJustify size={16} />} fitPageIcon={<FiMaximize2 size={16} />} />
             <PDFThemeToggle lightIcon={<FiSun size={16} />} darkIcon={<FiMoon size={16} />} />
             <PDFPrintButton icon={<FiPrinter size={16} />} />
+            <PDFChangeFile icon={<FiFolderPlus size={16} />} />
+            <PDFDownloadButton icon={<FiDownload size={15} />} />
+            <PDFNavigation prevIcon={<FiChevronLeft size={16} />} nextIcon={<FiChevronRight size={16} />} />
+            {/* custom button with overflow label */}
+            <PDFToolbarItem label="Share">
+              <button onClick={() => {}}>Share</button>
+            </PDFToolbarItem>
           </PDFToolbar>
         }
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdf-tsx",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A fully-featured, composable PDF viewer component for React",
   "type": "module",
   "main": "./dist/cjs/index.cjs",
@@ -53,6 +53,7 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^16.5.0",
     "react-icons": "^5.6.0",
+    "react-scan": "^0.5.6",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.58.1",
     "vite": "^8.0.8",