The RhPdfViewer is a component that previews PDF documents in a web application. It has a set of props that provide various customization options for the PDF viewer. The component can be easily integrated into a React application to display PDF files with minimal configuration.
Once installed, you can import the RhPdfViewer component into your React application:
import {RhPdfViewer} from "@rhythm-ui/react"
Then, you can use the RhPdfViewer component in your JSX code:
<RhPdfViewer className="h-[90vh]" file={SamplePDF} />
Name | Type | Default | Description |
|---|---|---|---|
| initialScale | number | 1 | A positive number to preview pdf pages by Scale |
| file | any | Document that needs to preview | |
| miniMap | boolean | true | Hide preview thumbnails of pdf pages |
| className | string | Custom CSS classnames | |
| scaleBy | number | 0.25 | A positive number ZoomIn and ZoomOut pdf pages by Scale |
The miniMap is a boolean prop that determines whether to display a thumbnail preview of the PDF pages in the sidebar. When set to true, the preview thumbnails will be displayed. When set to false, the preview thumbnails won't be displayed. The default value is true.
<RhPdfViewer className="h-[90vh]" file={SamplePDF} miniMap={false} />
The initialScale prop takes a positive number that sets the initial zoom level of the PDF pages. The default value is 1.
<RhPdfViewer className="h-[90vh]" file={SamplePDF} initialScale={1} />
The scaleBy prop takes a positive number that determines the scale factor used when zooming in or out of the PDF pages. For example, a value of 0.2 will zoom in by 20%. The default value is 1.
<RhPdfViewer className="h-[90vh]" file={SamplePDF} scaleBy={0.2} />