React
usePDFSlickStore()
This is basically a Zustand store that handles and gives access to PDFSlick's state:
{
isDocumentLoaded: boolean;
pagesReady: boolean;
numPages: number;
pageNumber: number;
scale: number;
scaleValue: string | undefined;
pagesRotation: number;
spreadMode: number;
scrollMode: number;
url: string | null;
filename?: string;
filesize?: number;
title?: string;
author?: string;
subject?: string;
keywords?: any;
creationDate?: Date | null;
modificationDate?: Date | null;
creator?: string;
producer?: string;
version?: string;
pageSize?: any;
isLinearized?: boolean;
documentOutline: TPDFDocumentOutline | null;
attachments: Map<string, TPDFDocumentAttachment>;
annotationEditorMode: number;
thumbnailViews: Map<number, PDFThumbnailView>;
thumbnails: Map<number, {
pageNumber: number;
width: number;
height: number;
scale: number;
rotation: number;
loaded: boolean;
pageLabel: string | null;
src: string | null;
}>;
pdfSlick: PDFSlick | null;
}
So for example, to get the current scale and the number of pages of the PDF document, and show it somewhere in a component we could use usePDFSlickStore()
like in the following code:
const currentScale = usePDFSlickStore(state => state.scale);
const numPages = usePDFSlickStore(state => state.numPages);
// ... and use it later on in your component's JSX
<p>The current scale is: {currentScale}</p>
<p>The number of pages is: {numPages}</p>