How to set a conditional template render if the browser is Firefox?

Question

I'm trying to display a PDF with an "<iframe>" tag. In Chrome the PDF displays like I want it to. In Firefox nothing is displayed, and the PDF is insta-downloaded instead.

I want to continue to display the PDF in "iframe" if the browser is Chrome, but render an "<img>" tag instead if the browser is Firefox, so I figured I'd set up a conditional property/template like this:

const PDFviewer = () => {
  const [isFirefox, setIsFirefox] = useState(false);

  useEffect(() => {
    window.onload = function () {
      if (navigator.userAgent.indexOf("Firefox") > 0) {
        setIsFirefox(true);
      }
    };
  }, []);


  return (
    <>
        <Navbar />
        {isFirefox && <h1>Firefox</h1>}

        {!isFirefox && (
          <div className="pdf-wrapper">
            <div className="pdf-viewer">
              <iframe
                src={samplePDF}
                className="i-frame"
              />
            </div>
          </div>
        )}
      </>
    </>
  );
};

This doesn't work. When I open the page in Firefox it correctly displays "<h1>Firefox</h1>", but the PDF gets downloaded anyways which I'm trying to avoid.

I also tried:

    {isFirefox ? <h1>Firefox</h1> : 
    <div className="pdf-wrapper">
      <div className="pdf-viewer">
        <iframe
          src={samplePDF}
          className="i-frame"
        />
      </div>
    </div>
  }

but the same thing happens and the PDF downloads anyways.

I thought maybe the problem was the slight delay in "useEffect" was causing the page to render "not firefox" before it gets a chance to recognize that it IS Firefox.

So I put the return in a "setTimeout()" like this:

  setTimeout(()=>{
    return (
    <>
        {isFirefox && <h1>Firefox</h1>}

        {!isFirefox && (
          <div className="pdf-wrapper">
            <div className="pdf-viewer">
              <iframe
                src={samplePDF}
                className="i-frame"
                style={{ height: "100vh", width: "100vw" }}
              />
            </div>
          </div>
        )}
    </>
  );

  }, 1000)

but that doesn't work.

Then I tried switching the hooks to

const [isNotFirefox, setIsNotFirefox] = useState(false)

so that Firefox is the default and it wouldn't render the <iframe> unless the function determines its NOT Firefox first. But this didn't work either.

I'm running out of ideas on how to potentially fix this. Can somebody help? I want to make it so if the browser is Chrome, it renders the "<iframe>"; but if the browser is Firefox, it renders an "<img>" tag instead. Is this possible to do?

How can I accomplish that?

If it's not possible, how can I render a PDF without "<iframe>"? I already tried this React package, "react-pdf":

https://www.npmjs.com/package/react-pdf

but it's giving me nothing but problems and not displaying correctly. It's appearing as a jpeg on a canvas with unneccessary text under it instead of simply showing the PDF. Problems outlined here if anybody knows how to fix this instead

"react-pdf" displaying text found inside the PDF instead of the PDF itself?

Help?

How to set a conditional template render if the browser is Firefox?

0 Answers0