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

7 votes187 views1 answer
React native touchableopacity disable
Javascript React
0 vote205 views1 answer
Onclick on fragment react
Javascript React
0 vote210 views1 answer
Curved lines on google maps usint react
Javascript React
0 vote177 views1 answer
React-file-base64
Javascript React
0 vote189 views1 answer
React js child css
Javascript React
37 votes143 views5 answers
React sass
Javascript React
0 vote197 views1 answer
React video srcObject
Javascript React
0 vote189 views1 answer
React native stylesheet shortcut
Javascript React
16 votes198 views1 answer
React native 0.60.4 xiaomi crashes at open
Javascript React
13 votes257 views3 answers
React native conditional rendering
Javascript React