PDF Preview Link

Librería React para mostrar una vista previa de la primera página de un PDF al pasar el mouse sobre un enlace.

🚀 Instalación

npm install pdf-preview-link
# o
yarn add pdf-preview-link
# o
pnpm add pdf-preview-link

📖 Uso Básico

import { PDFPreviewLink } from 'pdf-preview-link'

function App() {
	return (
		<PDFPreviewLink href='https://ejemplo.com/documento.pdf'>
			Ver documento
		</PDFPreviewLink>
	)
}

⚙️ API

PDFPreviewLink

Componente principal que envuelve un enlace con funcionalidad de preview.

Props

| Prop | Tipo | Default | Descripción | | ---------------- | ----------------------------- | ------------- | --------------------------------------------- | | href | string | requerido | URL del PDF a previsualizar | | previewOptions | PreviewOptions | {} | Opciones de configuración del preview | | popupClassName | string | '' | Clase CSS para el contenedor del popup | | renderLoading | () => ReactNode | - | Renderizado personalizado del estado de carga | | renderError | (error: Error) => ReactNode | - | Renderizado personalizado del estado de error | | ...anchorProps | AnchorHTMLAttributes | - | Props estándar de elemento <a> |

PreviewOptions

| Opción | Tipo | Default | Descripción | | ---------- | -------------------------------------------------- | -------- | --------------------------------------- | | width | number | 300 | Ancho del preview en píxeles | | height | number | 400 | Alto del preview en píxeles | | delay | number | 300 | Delay en ms antes de mostrar el preview | | position | 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' | 'auto' | Posición del popup | | offset | number | 8 | Offset en píxeles desde el elemento | | scale | number | 1.5 | Calidad de renderizado (0-3) |

usePDFPreview

Hook para casos de uso avanzados.

import { usePDFPreview } from 'pdf-preview-link'

function MyComponent() {
	const {
		thumbnailUrl, // URL de la miniatura generada
		isLoading, // Boolean indicando si está cargando
		isSuccess, // Boolean indicando éxito
		isError, // Boolean indicando error
		error, // Objeto Error si ocurrió
		generatePreview, // Función para generar el preview
		clearPreview, // Función para limpiar
	} = usePDFPreview('https://ejemplo.com/documento.pdf', {
		width: 300,
		height: 400,
	})

	return <button onClick={generatePreview}>Generar Preview</button>
}

💡 Ejemplos

Opciones personalizadas

<PDFPreviewLink
	href='https://ejemplo.com/documento.pdf'
	previewOptions={{
		width: 400,
		height: 500,
		delay: 500,
		position: 'right',
		scale: 2.0,
	}}
>
	Ver documento
</PDFPreviewLink>

Estados personalizados

<PDFPreviewLink
	href='https://ejemplo.com/documento.pdf'
	renderLoading={() => <div>Cargando preview... 🔄</div>}
	renderError={(error) => <div>Error: {error.message}</div>}
>
	Ver documento
</PDFPreviewLink>

🎯 Características

• ✅ Liviano: < 15KB gzipped
• ✅ TypeScript: Tipado completo incluido
• ✅ Flexible: API simple y hook para casos avanzados
• ✅ Caché: Evita recargas innecesarias
• ✅ Accesible: Compatible con WCAG 2.1 AA
• ✅ Posicionamiento inteligente: Se ajusta automáticamente

🌐 Requisitos

• React 18+
• Navegador moderno (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)

🛠️ Desarrollo

# Instalar dependencias
npm install

# Ejecutar tests
npm test

# Ver cobertura
npm run coverage

# Build
npm run build

📄 Licencia

MIT © 2026