add pdf in react app

1import React, { PureComponent } from "react"
2import { Document, Page } from "react-pdf/build/entry.webpack"
3import throttle from "lodash.throttle"
4import pdf from "./pdf.pdf"
5
6class App extends PureComponent {
7  constructor(props) {
8    super(props)
9    this.state = {width: null}
10    this.throttledSetDivSize = throttle(this.setDivSize, 500)
11  }
12
13  componentDidMount () {
14    this.setDivSize()
15    window.addEventListener("resize", this.throttledSetDivSize)
16  }
17
18  componentWillUnmount () {
19    window.removeEventListener("resize", this.throttledSetDivSize)
20  }
21
22  setDivSize = () => {
23    this.setState({width: this.pdfWrapper.getBoundingClientRect().width})
24  }
25
26  render() {
27    return (
28      <div id="row" style={{height: "100vh", width: "100vw", display: "flex", overflow: "hidden"}}>
29        <div id="placeholderWrapper" style={{width: "10vw", height: "100vh"}}/>
30        <div id="pdfWrapper" style={{width: "90vw"}} ref={(ref) => this.pdfWrapper = ref}>
31          <PdfComponent wrapperDivSize={this.state.width} />
32        </div>
33      </div>
34    )
35  }
36}
37
38class PdfComponent extends PureComponent {
39  render() {
40    return (
41      <div>
42        <Document
43          file={pdf}
44        >
45          <Page pageIndex={1} width={this.props.wrapperDivSize} />
46        </Document>
47      </div>
48    )
49  }
50}
51
52export default App

1/*
2Make sure to install the library
3with yarn
4yarn add @react-pdf/renderer
5with npm
6npm install @react-pdf/renderer --save
7*/
8
9import React from 'react';
10import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
11
12// Create styles
13const styles = StyleSheet.create({
14  page: {
15    flexDirection: 'row',
16    backgroundColor: '#E4E4E4'
17  },
18  section: {
19    margin: 10,
20    padding: 10,
21    flexGrow: 1
22  }
23});
24
25// Create Document Component
26const MyDocument = () => (
27  <Document>
28    <Page size="A4" style={styles.page}>
29      <View style={styles.section}>
30        <Text>Section #1</Text>
31      </View>
32      <View style={styles.section}>
33        <Text>Section #2</Text>
34      </View>
35    </Page>
36  </Document>
37);

1    <Grid centered columns={2}>
2      <Grid.Column textAlign="center" onClick={this.nextPage}>
3      
4        <Document file='/Sample.pdf' onLoadSuccess={this.onDocumentLoadSuccess} noData={<h4>Please select a file</h4>}>
5          <Page pageNumber={pageNumber} >
6
7          </Page>
8        </Document>
9        {this.state.file ? <p>Page {pageNumber} of {numPages}</p> : null}
10      </Grid.Column>
11    </Grid>
12  </Container>
13);
14