## tl;dr
npm install react-pdf-viewer-component- 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.
A minimal demo page can be found in sample directory.
CSR demo is also available!
SSR(next.js) demo is also available!
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 (
<>
>
)
}
``