HTML viewer with hook

[grahampcharles]

Hey there! You mentioned that in 2.0 it would become possible to build a dynamic PDF viewer in HTML, the way you have REPL working. I'm struggling even to get started... Here's my code with the hook:

`export default function App() {
const myDoc = MyDoc(); // this is a normal that renders fine on download
const [pdf, updatePdf] = usePDF({
document: myDoc,
});

if (pdf.loading) return <div>Loading...</div>;
if (pdf.error) return <div>Error {pdf.error} </div>;

return (
    // display
    <PDFViewer>
        {pdf}
    </PDFViewer>
);

}`

PDFViewer obviously wants a React.Element, not a usePDFInstance. Can you point me in the right direction?

[diegomura]

Of course! https://react-pdf.org/advanced#using-the-usepdf-hook
If you are not trying to achieve a download button, you can pass the url to an iframe or any third party library you would like to use to visualize the PDF document

[grahampcharles]

I am trying to achieve what REPL does: a preview that changes when users change parameters and a download button. Having a heckuva time.

[diegomura]

You can take a look at https://github.com/react-pdf/site for the REPL implementation. It uses the other react-pdf library to visualize the document that this one generates

[grahampcharles]

Sure... a couple of weeks ago you suggested that 2.0 would support its own HTML viewer component. ( #1166 (reply in thread) ). I was trying to implement that.