@edgepdf/viewer-react
v0.0.32
Published
EdgePDF Viewer - React components for viewing PDF documents with interactive markers and zoom controls
Readme
@edgepdf/viewer-react
EdgePDF Viewer - React components for viewing PDF documents with interactive markers and zoom controls.
Installation
npm install @edgepdf/viewer-react @edgepdf/viewer-js
# or
pnpm add @edgepdf/viewer-react @edgepdf/viewer-js
# or
yarn add @edgepdf/viewer-react @edgepdf/viewer-jsUsage
Next.js
In your Next.js application, you need to import the CSS file manually:
App Router (app directory):
// app/layout.tsx
import '@edgepdf/viewer-react/styles.css';
import { ViewerProvider } from '@edgepdf/viewer-react';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<ViewerProvider>{children}</ViewerProvider>
</body>
</html>
);
}// app/page.tsx
import { EdgePDFViewer } from '@edgepdf/viewer-react';
import type { ViewerConfig } from '@edgepdf/types';
const config: ViewerConfig = {
tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
imageInfo: {
width: 2000,
height: 3000,
tileSize: 256,
maxZoom: 5,
minZoom: 0,
},
};
export default function Page() {
return <EdgePDFViewer config={config} />;
}Pages Router:
// pages/your-page.tsx
import '@edgepdf/viewer-react/styles.css';
import { ViewerProvider, EdgePDFViewer } from '@edgepdf/viewer-react';
import type { ViewerConfig } from '@edgepdf/types';
const config: ViewerConfig = {
tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
imageInfo: {
width: 2000,
height: 3000,
tileSize: 256,
maxZoom: 5,
minZoom: 0,
},
};
export default function Page() {
return (
<ViewerProvider>
<EdgePDFViewer config={config} />
</ViewerProvider>
);
}Other React Applications
import '@edgepdf/viewer-react/styles.css';
import {
ViewerProvider,
EdgePDFViewer,
useMarkers,
useViewer,
} from '@edgepdf/viewer-react';
import type { ViewerConfig } from '@edgepdf/types';
const config: ViewerConfig = {
tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
imageInfo: {
width: 2000,
height: 3000,
tileSize: 256,
maxZoom: 5,
minZoom: 0,
},
};
function MarkerPanel() {
const { markers } = useMarkers();
const { viewer, isInitialized } = useViewer();
// You can interact with viewer + markers here,
// independent of where <EdgePDFViewer /> is rendered.
return (
<div>
<div>Initialized: {isInitialized ? 'yes' : 'no'}</div>
<div>Total markers: {markers.length}</div>
</div>
);
}
function App() {
return (
<ViewerProvider>
{/* This can be on one route/screen */}
<MarkerPanel />
{/* And EdgePDFViewer can be on another */}
<EdgePDFViewer config={config} />
</ViewerProvider>
);
}Building
Run nx build viewer-react to build the library.
Running unit tests
Run nx test viewer-react to execute the unit tests via Jest.