Build a Lightweight PDF Viewer in Browser Using React WITHOUT Any External Libraries!

App.jsx

import React, { useState } from 'react';

const SimplePDFViewer = () => {
  const [fileURL, setFileURL] = useState(null);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (!file || file.type !== 'application/pdf') {
      alert('Please select a valid PDF file');
      return;
    }

    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      setFileURL(e.target.result);
    };
    fileReader.readAsDataURL(file);
  };

  return (
    <div style={{ padding: '1rem' }}>
      <h2>Basic PDF Viewer (No external libraries)</h2>
      <input type="file" accept="application/pdf" onChange={handleFileChange} />
      
      {fileURL ? (
        <iframe
          title="PDF Preview"
          src={fileURL}
          width="100%"
          height="600px"
          style={{ border: '1px solid #ccc', marginTop: '1rem' }}
        />
      ) : (
        <p style={{ marginTop: '1rem' }}>Please upload a PDF to view</p>
      )}
    </div>
  );
};

export default SimplePDFViewer;

import React, { useState } from 'react';

const SimplePDFViewer = () => {

const [fileURL, setFileURL] = useState(null);

const handleFileChange = (event) => {

const file = event.target.files[0];

if (!file || file.type !== 'application/pdf') {

alert('Please select a valid PDF file');

return;

}

const fileReader = new FileReader();

fileReader.onload = (e) => {

setFileURL(e.target.result);

};

fileReader.readAsDataURL(file);

};

return (

<h2>Basic PDF Viewer (No external libraries)</h2>

{fileURL ? (

<iframe

title="PDF Preview"

src={fileURL}

width="100%"

height="600px"

style={{ border: '1px solid #ccc', marginTop: '1rem' }}

) : (

<p style={{ marginTop: '1rem' }}>Please upload a PDF to view</p>

)}

</div>

);

};

export default SimplePDFViewer;

Build a Lightweight PDF Viewer in Browser Using React WITHOUT Any External Libraries!

Comments

Leave a Reply Cancel reply

Archives