@pdtp/react
This package provides React components and hooks for rendering and managing data transferred using the PDTP protocol. It supports chunked data processing and offers utilities to integrate PDTP into React applications.
Installation
npm install @pdtp/react
Usage
import { PdtpProvider, PdtpRenderer } from "@pdtp/react"; const App = () => { return ( <PdtpProvider options={{ file: "example.pdf", headers: { base: 0, start: 1, end: 5 }, }} > <PdtpRenderer /> </PdtpProvider> ); };
API
PdtpProvider
A context provider for managing PDTP configuration in a React application.
export const PdtpProvider: React.FC<{ options: PdtpRequestOptions; children: React.ReactNode; }>
- options: Configuration options for the PDTP request.
- file: The file to request via the PDTP protocol.
- headers: Request headers, including
bas
,star
, anden
for page ranges.
- children: The child components to be wrapped within the provider.
usePdtpContext
A React hook for accessing the PDTP context.
export function usePdtpContext(): { requestOptions: PdtpRequestOptions; }
- Throws an error if used outside of a
PdtpProvider
.
PdtpRenderer
A React component for rendering data obtained via the PDTP protocol.
export const PdtpRenderer: FC;
- Automatically renders pages, text, images, and paths based on the parsed PDTP data.
usePdtpData
A React hook for fetching and organizing chunked PDTP data by page.
export function usePdtpData(): Record<number, PageData>;
- Returns a record of page data, including metadata for text, images, and paths.
PageData
An object representing a single page's data.
type PageData = { page: number; width: number; height: number; texts: Array<TextMetadata>; images: Array<{ meta: ImageMetadata; url: string }>; paths: Array<PathMetadata>; };