Live preview of PDF

[nicholsss]

I'm wondering if there is a way to have a live preview of the PDF that I'm currently working on. I'm building a Resume Builder application with Next.js, and having a live preview of the resume is a crucial functionality. I found the React-PDF REPL example: https://github.com/diegomura/react-pdf-site/tree/master/src/components/Repl
https://react-pdf.org/repl
So, basically, I'm looking to achieve the same behaviour as the REPL has, so if there is a change in the data, it would update the PDF also with the new data.

[coskuncakir]

hey @nicholsss, I had to do something similar recently and ended up using react-pdf to preview the document so thought it might help

here how i have done;

import React, { useState, useEffect } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import YourPDFDocument from './yourdocument';
import { usePDF } from '@react-pdf/renderer';

pdfjs.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.min.js';

const Preview = () => {
  const [numPages, setNumPages] = useState(null);
  const [instance, updateInstance] = usePDF({ document: <YourPDFDocument /> });

  useEffect(() => {
    updateInstance();
  }, []);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  return (
    <div>
      <Document
        file={instance.url}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {Array.from(new Array(numPages), (el, index) => (
          <Page key={index} pageNumber={index + 1} />
        ))}
      </Document>
    </div>
  );
};

export default Preview;

[nicholsss]

Sorry from long delay of answer yeah i also ended with something like your suggestion, but im not using usePDF. Do you happen to know how i can get rid of the flicker when an the PDF is updating. On my page basically when the pdf gets re-rendered for updates one there is small period of flicker that shows "loading PDF..."