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

0 vote160 views1 answer
Back press subscriptions i is not a function react native
Javascript React
2 votes165 views3 answers
How to get current date in react js
Javascript React
0 vote139 views1 answer
React input value set state on change
Javascript React
94 votes157 views6 answers
Install react router
Javascript React
10 votes149 views4 answers
Attempted import error 'switch' is not exported from 'react-router-dom'. in react js
Javascript React
4 votes138 views2 answers
How to take 100% width in react native
Javascript React
0 vote184 views1 answer
React native flexbox 2 columns 1 fixed width
Javascript React
0 vote163 views1 answer
My vscode does not recognize react code syntax
Javascript React
0 vote1.3K views1 answer
How get value of datePicker in react
Javascript React
0 vote226 views1 answer
Disable autocomplete in react fields
Javascript React