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 . 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):

``js
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 (



);
}
`

Usage - SSR(NextJs)

$3

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

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

export default function App({ Component, pageProps }) {
return
}

`

$3

exclude ssr for pdf to optimize and effective resource in server
`js
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 (
<>


)
}
``

$3

React-pdf