import React, {useState} from 'react'
import { Document,Page } from 'react-pdf/dist/esm/entry.webpack';
import './App.css';
function App() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({numPages}){
setNumPages(numPages);
setPageNumber(1);
}
function changePage(offSet){
setPageNumber(prevPageNumber => prevPageNumber + offSet);
}
function changePageBack(){
changePage(-1)
}
function changePageNext(){
changePage(+1)
}
return (
<div className="App">
<header className="App-header">
<Document file="/sample.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page height="600" pageNumber={pageNumber} />
</Document>
<p> Page {pageNumber} of {numPages}</p>
{ pageNumber > 1 &&
<button onClick={changePageBack}>Previous Page</button>
}
{
pageNumber < numPages &&
<button onClick={changePageNext}>Next Page</button>
}
</header>
<center>
<div>
<Document file="/sample.pdf" onLoadSuccess={onDocumentLoadSuccess}>
{Array.from(
new Array(numPages),
(el,index) => (
<Page
key={`page_${index+1}`}
pageNumber={index+1}
/>
)
)}
</Document>
</div>
</center>
</div>
);
}
export default App;
I have above code to display PDF in React, but with it i can not select text that is on it, text appears only below pdf, that is showed as a image. How can i display PDF with selectable text inside it and not below?
I was trying to search in react-pdf documentation but i dont find nothing about it.