¿Qué es PDFSlick y qué resuelve?

Por debajo, PDFSlick envuelve a PDF.js de Mozilla —el mismo motor que usa Firefox para renderizar PDFs— y lo conecta a una store reactiva basada en Zustand. La gracia está en que no tienes que lidiar con la API de PDF.js directamente, que es perfectamente funcional pero está pensada para Vanilla JS y se pone incomoda en entornos de componentes como React.

El resultado es que obtienes un hook (usePDFSlick()) que te devuelve el componente visor, la ref y acceso al estado del documento. Puedes leer el número de página actual, el zoom, el total de páginas, y reaccionar a cambios igual que con cualquier otro estado de tu app.

Soporta React, SolidJS y Svelte, más un paquete @pdfslick/core para Vanilla JS si necesitas algo más a medida.

Lo que trae la v4

Las novedades más relevantes del salto a la versión 4:

  • Anotaciones: soporte para renderizar las anotaciones embebidas en el propio PDF.
  • Responsive: el visor se adapta al contenedor sin configuración extra.
  • Modo oscuro: integración con el sistema de color del navegador.

Para proyectos donde los PDFs son parte central de la UI —reportes, contratos, documentación técnica— este update le da bastante más polvollo al asunto.

Integración básica en React

No requiere mucho para arrancar:

npm install @pdfslick/react

import { usePDFSlick } from "@pdfslick/react";
import "@pdfslick/react/dist/pdf_viewer.css";

const PDFViewer = ({ url }: { url: string }) => {
  const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(url, {
    scaleValue: "page-fit",
  });

  const pageNumber = usePDFSlickStore((s) => s.pageNumber);
  const numPages = usePDFSlickStore((s) => s.numPages);

  return (
    <div className="relative h-full pdfSlick">
      <PDFSlickViewer {...{ viewerRef, usePDFSlickStore }} />
      <p>{pageNumber} / {numPages}</p>
    </div>
  );
};

El patrón es bastante limpio: el hook centraliza todo y puedes pasar usePDFSlickStore como prop a cualquier componente hijo que necesite reaccionar al estado del documento —una barra de navegación, un panel de miniaturas, lo que sea.