React-pdf: REPL source code

[kishaningithub]

The REPL in the site is totally amazing. It really helped me get upto speed.
I want to know where can i find the source code of the REPL. i couldn't find it in this repo.
Thanks in advance!

[kishaningithub]

I am actually curious on how you rendered the PDF on the right. It blends with the site very well and does not using any pdf to image conversion techniques. I also noticed that the PDFViewer uses iframes, I personally prefer to avoid that.

I am very new to this. Any pointers to say a blog's etc would also be really helpful

[diegomura]

Hey @kishaningithub !

You can find the source code of react-pdf's site here, including the REPL part.

In order to render the PDF on the right I'm not using the PDFViewer that's shipped with react-pdf but the confusingly homonymous library react-pdf.

I don't have any blog post to share unfortunately, but I hope the code itself is self-explanatory enough to answer your questions about how you can achieve something like the REPL. Isn't that easy, but it's not a lot of code 😄

[mankityau]

Is there any plan for making this part of the feature?

[LinusU]

Here is a PDFViewer component that you could use, that works using the same technique as the REPL:

import React, { useEffect, useState } from 'react'
import { pdfjs, Document, Page } from 'react-pdf'
import { pdf } from '@react-pdf/renderer'

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

const PDFViewer = ({ children }) => {
  const [pdfUrl, setPdfUrl] = useState(null)

  useEffect(() => {
    const child = React.Children.only(children)

    pdf(child).toBlob().then(blob => {
      setPdfUrl(URL.createObjectURL(blob))
    })
  }, [children])

  return (
    <Document file={pdfUrl}>
      <Page renderMode='svg' pageNumber={1} />
    </Document>
  )
}

export default PDFViewer