How to Zoom in/Zoom out using React-PDF in React JS ?

Zooming in or out in React-PDF within a React JS application is achieved by using the ‘scale’ prop inside the `<Page />` component. The ‘scale’ prop accepts decimal values; values greater than 1 zoom in, while values less than 1 zoom out the page.

Prerequisites:

• React JS
• React Functional Components

Syntax:

<page scale = {value} />

// When we want to pass an integer value to scale.
<Page width={900} scale={30.0} className="page" pageNumber={1} />

Approach to Zoom in/out PDF using React:

This React code utilizes the ‘react-pdf’ library to render a PDF file (‘sample.pdf’). The App component includes a Document component with a specified PDF file, and within it, a Page component renders the first page with a scale of 2.0.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app pdfapp

Step 2: After creating your project folder i.e. pdfapp, move to it using the following command:

cd pdfapp

Step 3: After creating the React JS application, Install the required module using the following command:

npm install react-pdf

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-pdf": "^7.6.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript

import React from 'react';
import { Document, Page }
    from 'react-pdf/dist/esm/entry.webpack';

// Importing your sample PDF
import pdfFile from './sample.pdf'

// Defining our App Component
const App = () => {

    // Returning our JSX code
    return <>
        <div>
            <Document file={pdfFile}>
                <Page scale={2.0}
                    pageNumber={1} />
            </Document>
        </div>
    </>;
}

// Exporting your Default App Component
export default App

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000

Output