React-PDF-Viewer-component

tl;dr

• Install by executing npm install react-pdf-viewer-component or yarn add react-pdf-viewer-component.
• Import by adding import PdfViewer from 'react-pdf-viewer-component'.
• Use by adding <Document file="..." />. file can be a URL, base64 content, Uint8Array, and more.

Demo

A minimal demo page can be found in sample directory.

CSR demo is also available! SSR(next.js) demo is also available!

Usage

Here's an example of basic usage (CRA):

import React, { useState } from 'react';
import PdfViewer from 'react-pdf-viewer-component'
import FilePdf from './sample.pdf'
// add styleing 
import 'react-pdf-viewer-component/dist/style.css'


function MyApp() {
  const [file, setFile] = useState(FilePdf);

  return (
    <div>
        <PdfViewer file={file} className="container" />
    </div>
  );
}

Usage - SSR(NextJs)

1.Add styling

Adding style.css in file '_app.js' from pdf-viewer-component to get styling component :

import '../styles/globals.css'
// add this 
import 'react-pdf-viewer-component/dist/style.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

2. Use dynamic import by nextJs to disable when rendering in server

exclude ssr for pdf to optimize and effective resource in server

import dynamic from "next/dynamic";
// set this and wrapping react-pdf-viewer-component
const PDFViewer = dynamic(() => import("../components/pdf-viewer"), {
  ssr: false,
});

export default function Home() {
  return (
    <>
      <PDFViewer/>
    </>
  )
}

Thanks For

React-pdf