Pdf controls 29092025

README.md

@@ -1,5 +1,5 @@
-[![npm-version](https://img.shields.io/npm/v/@cyntler/react-doc-viewer.svg)](https://www.npmjs.com/package/@cyntler/react-doc-viewer)
-[![npm-download](https://img.shields.io/npm/dt/@cyntler/react-doc-viewer.svg)](https://www.npmjs.com/package/@cyntler/react-doc-viewer)
+[![npm-version](https://img.shields.io/npm/v/@t0kar/react-doc-viewer.svg)](https://www.npmjs.com/package/@t0kar/react-doc-viewer)
+[![npm-download](https://img.shields.io/npm/dt/@t0kar/react-doc-viewer.svg)](https://www.npmjs.com/package/@t0kar/react-doc-viewer)
 
 ## I am stopping work on this library
 
@@ -48,6 +48,7 @@ File viewer for **React v17+**.
 - [Config](#config)
   - [Overriding Header Component](#overriding-header-component)
   - [Overriding Loading Renderer](#overriding-loading-renderer)
+  - [Overriding PDF Controls](#overriding-pdf-controls)
   - [Overriding No Renderer (Error)](#overriding-no-renderer-error)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -543,7 +544,7 @@ const MyLoadingRenderer = ({ document, fileName }) => {
 ```
 ### Overriding PDF Controls
 
-You can override the default PDF controls by passing a callback function to `config.pdfControls.overrideComponent`. This function receives several parameters: the current PDF state, the pdfControls config, and handler functions for zooming in, zooming out, resetting zoom, and toggling pagination. Your function should return a React element to render custom controls.
+You can override the default PDF controls by passing a callback function to `config.pdfControls.overrideComponent`. This function receives several parameters: the current PDF state, the pdfControls config, and handler functions for zooming in, zooming out, resetting zoom, toggling pagination, going to next or back to previous page. Your function should return a React element to render custom controls.
 
 Example:
 
@@ -554,20 +555,36 @@ const MyPDFControls = (
   pdfZoomOut,
   pdfZoomIn,
   pdfZoomReset,
-  pdfTogglePaginated
+  pdfTogglePaginated,
+  pdfNextPage,
+  pdfPrevPage
 ) => {
-  // Example: Only show a custom zoom in/out
+
   return (
-    <div>
-      <button onClick={pdfZoomOut}>-</button>
-      <span>{pdfState.zoomLevel.toFixed(2)}</span>
-      <button onClick={pdfZoomIn}>+</button>
+      <div>
+      <button onClick={pdfZoomOut}>Zoom Out</button>
+      <span>
+        Zoom: {pdfState.zoomLevel?.toFixed(2)} 
+      </span>
+      <button onClick={pdfZoomIn}>Zoom In</button>
       <button onClick={pdfZoomReset} disabled={pdfState.zoomLevel === pdfState.defaultZoomLevel}>
-        Reset
+        Reset Zoom
       </button>
       <button onClick={pdfTogglePaginated}>
         {pdfState.paginated ? "Single Page" : "Paginated"}
       </button>
+      <span>
+        Paginated: {pdfState.paginated ? "Yes" : "No"}
+      </span>
+ {    pdfState.paginated && pdfState.numPages > 1 && <button onClick={pdfPrevPage} >
+        Prev Page
+      </button>
+      <span>
+      {pdfState.currentPage} / {pdfState.numPages}
+      </span>
+      <button onClick={pdfNextPage}>
+        Next Page
+      </button> </>} 
     </div>
   );
 };
@@ -591,6 +608,8 @@ The parameters provided to your override function are:
 - `pdfZoomIn`: Function to increase zoom.
 - `pdfZoomReset`: Function to reset zoom to default.
 - `pdfTogglePaginated`: Function to toggle between paginated and continuous scroll.
+- `pdfNextPage`: Function to go to the next page.
+- `pdfPrevPage`: Function to go to the previous page.
 
 If your override returns a React element, it will replace the default PDF controls UI.
 

src/DocViewer.stories.tsx

@@ -10,6 +10,7 @@ import epsFile from "./exampleFiles/eps-file.eps?url";
 import webpFile from "./exampleFiles/webp-file.webp?url";
 
 import { DocViewerRef, IDocument } from ".";
+import { IPdfControlsOverride } from "../dist";
 
 export default {
   title: "DocViewer",
@@ -135,3 +136,83 @@ export const NoRenderType = () => {
     />
   );
 };
+
+export const CustomPDFControls = () => {
+  const [selectedDocs, setSelectedDocs] = useState<File[]>([]);
+
+  const customPDFControls: IPdfControlsOverride = (
+    state,
+    config,
+    pdfZoomOut,
+    pdfZoomIn,
+    pdfZoomReset,
+    pdfTogglePaginated,
+    pdfNextPage,
+    pdfPrevPage,
+  ) => {
+    return (
+      <div
+        id="pdf-controls"
+        style={{
+          display: "flex",
+          gap: "8px",
+          padding: "8px",
+          background: "#eee",
+          position: "sticky",
+          top: 0,
+          left: 0,
+          zIndex: 1,
+        }}
+      >
+        <button onClick={pdfZoomOut}>Zoom Out</button>
+        <span>Zoom: {state.zoomLevel?.toFixed(2)}</span>
+        <button onClick={pdfZoomIn}>Zoom In</button>
+        <button onClick={pdfZoomReset}>Reset Zoom</button>
+        <button onClick={pdfTogglePaginated}>Toggle Pagination</button>
+        <span>Paginated: {state.paginated ? "Yes" : "No"}</span>
+        {state.paginated && state.numPages > 1 && (
+          <>
+            {" "}
+            <button onClick={pdfPrevPage} disabled={state.currentPage <= 1}>
+              Prev Page
+            </button>
+            <span>
+              {state.currentPage} / {state.numPages}
+            </span>
+            <button
+              onClick={pdfNextPage}
+              disabled={state.currentPage >= state.numPages}
+            >
+              Next Page
+            </button>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        accept=".pdf"
+        multiple
+        onChange={(el) =>
+          el.target.files?.length &&
+          setSelectedDocs(Array.from(el.target.files))
+        }
+      />
+      <DocViewer
+        documents={selectedDocs.map((file) => ({
+          uri: window.URL.createObjectURL(file),
+          fileName: file.name,
+        }))}
+        config={{
+          pdfControls: {
+            overrideComponent: customPDFControls,
+          },
+        }}
+      />
+    </>
+  );
+};

src/components/HeaderBar.tsx

@@ -26,12 +26,23 @@ export const HeaderBar: FC = () => {
     return (
       <Container id="header-bar" data-testid="header-bar">
         <FileName />
+         {    pdfState.paginated && pdfState.numPages > 1 && <button onClick={pdfPrevPage} >
+        Prev Page
+      </button>
+      <span>
+      {pdfState.currentPage} / {pdfState.numPages}
+      </span>
+      <button onClick={pdfNextPage}>
+        Next Page
+      </button> </>} 
         <DocumentNav />
       </Container>
     );
   }
 };
 
+
+
 const Container = styled.div`
   display: flex;
   justify-content: flex-end;

src/models.ts

@@ -60,17 +60,17 @@ export type IHeaderOverride = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ) => ReactElement<any, any> | null;
 
-export type IPdfControlsOverride = {
-  (
-    state: IPDFState,
-    config: IPdfControlsConfig,
-    pdfZoomOut?: () => void,
-    pdfZoomIn?: () => void,
-    pdfZoomReset?: () => void,
-    pdfTogglePaginated?: () => void,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ): ReactElement<any, any> | null;
-};
+export type IPdfControlsOverride = (
+  state: IPDFState,
+  config: IPdfControlsConfig,
+  pdfZoomOut?: () => void,
+  pdfZoomIn?: () => void,
+  pdfZoomReset?: () => void,
+  pdfTogglePaginated?: () => void,
+  pdfNextPage?: () => void,
+  pdfPrevPage?: () => void,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => ReactElement<any, any> | null;
 
 export interface ITheme {
   primary?: string;

src/renderers/pdf/components/PDFControls.tsx

@@ -3,7 +3,11 @@ import styled from "styled-components";
 import { Button, LinkButton } from "../../../components/common";
 import { IStyledProps } from "../../..";
 import { PDFContext } from "../state";
-import { setPDFPaginated, setZoomLevel } from "../state/actions";
+import {
+  setCurrentPage,
+  setPDFPaginated,
+  setZoomLevel,
+} from "../state/actions";
 import { useTranslation } from "../../../hooks/useTranslation";
 import {
   DownloadPDFIcon,
@@ -23,6 +27,7 @@ const PDFControls: FC = () => {
     mainState,
     paginated,
     zoomLevel,
+    currentPage,
     numPages,
     zoomJump,
     defaultZoomLevel,
@@ -37,6 +42,8 @@ const PDFControls: FC = () => {
   const pdfZoomIn = () => dispatch(setZoomLevel(zoomLevel + zoomJump));
   const pdfZoomReset = () => dispatch(setZoomLevel(defaultZoomLevel));
   const pdfTogglePaginated = () => dispatch(setPDFPaginated(!paginated));
+  const pdfNextPage = () => dispatch(setCurrentPage(currentPage + 1));
+  const pdfPrevPage = () => dispatch(setCurrentPage(currentPage - 1));
 
   const override = config?.pdfControls?.overrideComponent?.(
     pdfState,
@@ -45,6 +52,8 @@ const PDFControls: FC = () => {
     pdfZoomIn,
     pdfZoomReset,
     pdfTogglePaginated,
+    pdfNextPage,
+    pdfPrevPage,
   );
 
   if (override) {