diff --git a/README.md b/README.md index 957841fa..a253ee21 100644 --- a/README.md +++ b/README.md @@ -375,6 +375,11 @@ You can provide a config object, which configures parts of the component as requ zoomJump: 0.2, // 0.1 as default, }, pdfVerticalScrollByDefault: true, // false as default + + // only applicable for pdf + getPdfData: ({ currentPage, totalPages }) => { + console.log("pdf data", totalPages, currentPage); + }, }} /> ``` diff --git a/src/models.ts b/src/models.ts index 08d0902b..8075aa97 100644 --- a/src/models.ts +++ b/src/models.ts @@ -2,6 +2,11 @@ import { FC, ReactElement, ComponentType, PropsWithChildren } from "react"; import { IMainState } from "./store/mainStateReducer"; import { FileLoaderFunction } from "./utils/fileLoaders"; +export interface IpdfDataProps { + currentPage: number; + totalPages: number; +} + export interface IConfig { header?: IHeaderConfig; loadingRenderer?: ILoadingRendererConfig; @@ -9,6 +14,7 @@ export interface IConfig { csvDelimiter?: string; pdfZoom?: IPdfZoomConfig; pdfVerticalScrollByDefault?: boolean; + getPdfData?: (props: IpdfDataProps) => void | null | undefined; } export interface ILoadingRendererConfig { diff --git a/src/renderers/pdf/components/pages/PDFSinglePage.tsx b/src/renderers/pdf/components/pages/PDFSinglePage.tsx index ea90382b..e436585d 100644 --- a/src/renderers/pdf/components/pages/PDFSinglePage.tsx +++ b/src/renderers/pdf/components/pages/PDFSinglePage.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext } from "react"; +import React, { FC, useContext, useEffect, useRef } from "react"; import { Page } from "react-pdf"; import styled from "styled-components"; import { IStyledProps } from "../../../.."; @@ -14,13 +14,47 @@ const PDFSinglePage: FC = ({ pageNum }) => { state: { mainState, paginated, zoomLevel, numPages, currentPage }, } = useContext(PDFContext); const { t } = useTranslation(); + const pdfPageRef = useRef(null); const rendererRect = mainState?.rendererRect || null; const _pageNum = pageNum || currentPage; + // call function to return page data for single + useEffect(() => { + if (!mainState?.config?.getPdfData) return; + if (!numPages) return; + if (!paginated) return; + + mainState?.config?.getPdfData({ + currentPage: _pageNum, + totalPages: numPages, + }); + }, [numPages, _pageNum]); + + // call function to return page data for multi page + useEffect(() => { + if (paginated) return; + if (!mainState?.config?.getPdfData) return; + if (!pdfPageRef?.current) return; + if (!numPages) return; + + let observer = new IntersectionObserver((entries) => { + if (!entries?.[0]?.isIntersecting) return; + + mainState?.config?.getPdfData({ + currentPage: _pageNum, + totalPages: numPages, + }); + }); + observer.observe(pdfPageRef?.current); + }, [pdfPageRef?.current]); return ( - = numPages}> + = numPages} + ref={pdfPageRef} + > {!paginated && ( {t("pdfPluginPageNumber", {