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 vote209 views1 answer
React-native-restart
Javascript React
1 vote232 views1 answer
React multiple event handlers]
Javascript React
0 vote240 views1 answer
Ionic react use yarn
Javascript React
13 votes196 views2 answers
Download react devtools for chrome
Javascript React
23 votes234 views3 answers
React save to local storage
Javascript React
0 vote216 views2 answers
Change iphone return in keyboard to search in react native
Javascript React
0 vote203 views1 answer
React how to block render if data is not fetched yet
Javascript React
0 vote186 views1 answer
Why my favicon icon is not removing in react
Javascript React
8 votes193 views4 answers
Get current url react router
Javascript React
0 vote211 views1 answer
React router dom change default path
Javascript React