Add pdf in react app

import React, { PureComponent } from "react"
import { Document, Page } from "react-pdf/build/entry.webpack"
import throttle from "lodash.throttle"
import pdf from "./pdf.pdf"

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {width: null}
    this.throttledSetDivSize = throttle(this.setDivSize, 500)
  }

  componentDidMount () {
    this.setDivSize()
    window.addEventListener("resize", this.throttledSetDivSize)
  }

  componentWillUnmount () {
    window.removeEventListener("resize", this.throttledSetDivSize)
  }

  setDivSize = () => {
    this.setState({width: this.pdfWrapper.getBoundingClientRect().width})
  }

  render() {
    return (
      <div id="row" style={{height: "100vh", width: "100vw", display: "flex", overflow: "hidden"}}>
        <div id="placeholderWrapper" style={{width: "10vw", height: "100vh"}}/>
        <div id="pdfWrapper" style={{width: "90vw"}} ref={(ref) => this.pdfWrapper = ref}>
          <PdfComponent wrapperDivSize={this.state.width} />
        </div>
      </div>
    )
  }
}

class PdfComponent extends PureComponent {
  render() {
    return (
      <div>
        <Document
          file={pdf}
        >
          <Page pageIndex={1} width={this.props.wrapperDivSize} />
        </Document>
      </div>
    )
  }
}

export default App

Source: raw.githubusercontent.com

Similar codes

9 votes297 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
1 vote301 views1 answer
React list
Javascript React
1 vote336 views1 answer
React waypoint loadmore not working
Javascript React
0 vote324 views1 answer
React Redux store exemple
Javascript React
0 vote331 views1 answer
React rative release
Javascript React
4 votes323 views1 answer
Reactjs onclick open new page
Javascript React
0 vote316 views3 answers
Github react hardhat nft marketplace application
Javascript React
41 votes323 views5 answers
UseRef() in react
Javascript React
0 vote311 views1 answer
How to extract params from received link in react native firebase dynamiclink?
Javascript React
1 vote356 views1 answer
Java.lang.outofmemoryerror (no error message) react native
Javascript React