ZoomIn/ZoomOut buttons doesn't work with react-pdf

Question

I tried to code zoom in and zoom out buttons for my pdf viewer but it doesn't work. In each function I increase or reduce the initial scale, but nothing happens. My function is however well called at the click. Someone to help me or tell me what I am doing wrong please?

Here is my code for the viewer :

import { Document, Page, pdfjs } from 'react-pdf';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight, faChevronLeft, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
import './PdfViewer.scss';

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
// Small screens width detection
const MOBILE_WIDTH = 768;

export default class App extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
    scale: 1,
  };

  componentDidMount() {
    window.addEventListener('resize', this.resize);
    this.resize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  // Adapt the size of the scale according to the screen
  resize = () => {
    if (window.innerWidth <= MOBILE_WIDTH) {
      this.setState({ scale: 0.75 });
    }
  }

  zoomIn = () => {
    this.setState({
      scale: this.state.scale + 0.2,
    });
  };

  zoomOut = () => {
    this.setState({
      scale: this.state.scale - 0.2,
    });
  };

  goToPrevPage = () => this.setState(state => ({ pageNumber: state.pageNumber - 1 }));

  goToNextPage = () => this.setState(state => ({ pageNumber: state.pageNumber + 1 }));

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div className="pdfviewer">
        <Document
          file="https://test.s3.amazonaws.com/20200202.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page
            pageNumber={pageNumber}
            renderTextLayer={false}
          >
            <div className="pdfviewer__controls">
              <button id="button-left" onClick={this.goToPrevPage} disabled={pageNumber <= 1}><FontAwesomeIcon icon={faChevronLeft} /></button>
              <button id="zoomInButton" onClick={this.zoomIn}><FontAwesomeIcon icon={faPlus} /></button>
              <span>page {pageNumber}/{numPages || '--'}</span>
              <button id="zoomOutButton" onClick={this.zoomOut}><FontAwesomeIcon icon={faMinus} /></button>
              <button id="button-right" onClick={this.goToNextPage} disabled={pageNumber >= numPages}><FontAwesomcreIcon icon={faChevronRight} /></button>
            </div>
          </Page>
        </Document>
      </div>
    );
  }
}

Answer 1

You need to scale the Page component:

<Page
  pageNumber={pageNumber}
  renderTextLayer={false}
  scale={scale}
>