React library

Preview PDF links without breaking user flow

PDF Preview Link renders the first page on hover so users can validate documents instantly before opening a new tab.

Try live playground

Live demo

Hover this link

See the first page preview immediately without opening another screen.

Open interactive controls

Installation

Install from npm or load the UMD build from a CDN.

npm

npm install pdf-preview-link

CDN

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/pdf-preview-link/dist/index.umd.js"></script>

API reference

Option Type Default Description
href string required PDF URL used to generate the preview.
width number 300 Popup width in pixels.
height number 400 Popup height in pixels.
delay number 300 Hover delay before opening preview.
position 'auto' | 'top' | 'bottom' | 'left' | 'right' 'auto' Preferred popup placement.
offset number 8 Distance between link and popup.
scale number 1.5 Render quality factor for PDF preview image.

Playground

Explore variants in real time and copy the generated snippet directly into your project.

Control panel

Ajusta opciones y revisa el comportamiento del preview en tiempo real.

Live output

Hover on the link

Ver documento PDF
<PDFPreviewLink
  href="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
  previewOptions={{
    width: 280,
    height: 360,
    delay: 220,
    offset: 8,
    scale: 1.4,
    position: 'right',
  }}
>
  Ver documento
</PDFPreviewLink>