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:

👁 Image

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.

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