@react-pdf-viewer/core is designed with customization in mind. It provides a core set of features and allows developers to extend its functionality through plugins. This makes it a great choice for applications that need specialized features or want to integrate additional tools like annotations, bookmarks, or custom navigation.

react-pdf offers limited customization compared to @react-pdf-viewer/core. It focuses on providing a straightforward API for rendering PDFs, but it does not have a built-in plugin system. Customization is possible but may require more effort and manual implementation.

@react-pdf-viewer/core is optimized for performance, especially when dealing with large documents. Its modular architecture allows you to load only the features you need, which can help reduce the overall bundle size and improve load times.

react-pdf is also performance-oriented, but it may not be as efficient as @react-pdf-viewer/core for very large documents or applications that require advanced features. It is suitable for most use cases, but performance can vary depending on the complexity of the PDF and the rendering requirements.

@react-pdf-viewer/core has a steeper learning curve due to its modular nature and the need to configure plugins for additional functionality. However, it provides comprehensive documentation and examples to help developers get started.

react-pdf is known for its ease of use and simple API. It allows developers to quickly integrate PDF rendering into their applications with minimal configuration, making it a good choice for projects with tight deadlines or limited resources.

@react-pdf-viewer/core is designed to be lightweight, but the overall size can increase depending on the number of plugins and features you include. Its modular design allows you to keep the core viewer small and add only the functionality you need.

react-pdf has a relatively small footprint, but it relies on pdf.js for rendering, which can add to the bundle size. It is a good choice for applications where keeping dependencies minimal is important, but the trade-off is the added size of the PDF rendering engine.

Example of @react-pdf-viewer/core with a plugin

import { Viewer, Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

const defaultLayoutPluginInstance = defaultLayoutPlugin();

const App = () => (
  <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.6.347/build/pdf.worker.min.js">
    <div style={{ height: '750px' }}>
      <Viewer
        fileUrl="/path/to/document.pdf"
        plugins={[defaultLayoutPluginInstance]}
      />
    </div>
  </Worker>
);

export default App;

Example of react-pdf for rendering a PDF

import { Document, Page } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

const App = () => {
  const [numPages, setNumPages] = React.useState(null);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  return (
    <div>
      <Document
        file="/path/to/document.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {Array.from(new Array(numPages), (el, index) => (
          <Page key={`page_${index + 1}`} pageNumber={index + 1} />
        ))}
      </Document>
    </div>
  );
};

export default App;