Custom toolbar Replace the toolbar with your own controls, or combine parts of the built-in toolbar with buttons of your own.
Basics
renderToolbar(api) replaces the toolbar with anything you render, driven by the viewer API .
import { PdfViewer } from '@kingtech/react-pdf-viewer';
export default function Demo() {
return (
<PdfViewer
source="/samples/multipage.pdf"
toolbar={{ position: 'top' }}
renderToolbar={(api) => (
<div className="demo-controls" role="group" aria-label="Document controls">
<button
type="button"
className="demo-button"
onClick={api.previousPage}
disabled={api.page <= 1}
>
← Back
</button>
<span aria-live="polite">
Page {api.page} of {api.numPages}
</span>
<button
type="button"
className="demo-button"
onClick={api.nextPage}
disabled={api.page >= api.numPages}
>
Next →
</button>
<select
aria-label="Zoom"
value={String(api.scale)}
onChange={(event) => api.setScale(Number(event.target.value))}
>
{[0.5, 0.75, 1, 1.5, 2].map((scale) => (
<option key={scale} value={String(scale)}>
{scale * 100}%
</option>
))}
</select>
<button type="button" className="demo-button" onClick={() => void api.download()}>
Download
</button>
</div>
)}
/>
);
}
The custom toolbar sits where the built-in one would, honoring toolbar.position. It re-renders with a fresh api whenever page, zoom, rotation or status change.
PdfToolbar is the built-in toolbar as a component. Render it with a subset of actions next to your own buttons.
import { PdfToolbar, PdfViewer } from '@kingtech/react-pdf-viewer';
export default function Demo() {
return (
<PdfViewer
source="/samples/multipage.pdf"
renderToolbar={(api) => (
<div
style={{
display: 'flex',
flexWrap: 'wrap',
gap: 12,
alignItems: 'center',
justifyContent: 'center',
}}
>
<PdfToolbar
api={api}
config={{ actions: ['previousPage', 'pageIndicator', 'nextPage'] }}
/>
<button type="button" onClick={() => void api.print()}>
Print this report
</button>
</div>
)}
/>
);
}
PdfToolbar keeps its accessibility (single tab stop, arrow-key navigation, the responsive More actions menu) wherever you place it.
Customization
PdfToolbar takes config, labels, locale, compact, zoomReset, a replacement pageIndicator and menuPlacement.
import { PdfToolbar, PdfViewer } from '@kingtech/react-pdf-viewer';
import type { CSSProperties } from 'react';
const style = {
'--rpv-toolbar-bg': '#115e59',
'--rpv-toolbar-max-width': '640px',
} as CSSProperties;
export default function Demo() {
return (
<PdfViewer
source="/samples/letter-3pages.pdf"
toolbar={{ position: 'top' }}
style={style}
renderToolbar={(api) => (
<PdfToolbar
api={api}
zoomReset
menuPlacement="bottom"
labels={{ moreActions: 'More' }}
pageIndicator={
<span>
{api.page} ∕ {api.numPages}
</span>
}
/>
)}
/>
);
}
Every prop is listed in the PdfToolbarProps referencecustomization guide .
Advanced / escape hatch
Hide the toolbar (toolbar={false}) and render controls anywhere in your layout with a ref , or build a viewer from scratch with the headless pieces.
Accessibility is yours in a custom toolbar
A renderToolbar UI replaces the built-in keyboard and screen reader behavior. Label every
control, keep disabled states in sync with canZoomIn, canZoomOut, page and numPages, and
announce page changes, as the first demo does with aria-live.
Limitations
One toolbar slot. renderToolbar renders in the toolbar position only. Workaround: hide the toolbar and place controls anywhere with a ref.PdfToolbar needs a viewer API.PdfPageCanvas directly. Workaround: build headless controls from usePdfDocument state. API PdfToolbar — The default toolbar: zoom, page navigation, fullscreen, rotate, download and print, on one row. PdfToolbarProps — Props for PdfToolbar: the viewer API it controls, its labels and configuration, the compact layout and the page indicator slot.