React - Import dynamically path to pdf file

Question

Firstly, my page will make an http request to an API

API then response an object which have a path: ./assets/sample.pdf

I want to get urlPdf from import urlPdf from response.path

How can I do that ?

Answer 1

I'd try with https://www.npmjs.com/package/react-pdf

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

const App = () => {
  const [pageNumber, setPageNumber] = useState();
  const [numPages, setNumPages] = useState();
  const [urlPdf, setUrlPdf] = useState();

  const _onDocumentLoadSuccess = ({ numPages }) => setNumPages(numPages);
  
  const fetchPdfPath = ({
    // logic handle get path...
    // setUrlPdf(response.data);
  })
  
  return (
    <div>
      {urlPdf && (
        <Document
          file={urlPdf}
          onLoadSuccess={_onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      )}
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}

Answer 2

Oh super simple. Just const result = require(response.path)