Scribd
Upload
6 views1 page

Test

The document is a React component named DocumentViewer that displays different types of documents based on their file extension. It supports PDF files by using the @react-pdf-viewer library and displays DOC or DOCX files using Google Docs viewer. If the file type is unsupported, it shows an error message indicating the unsupported file type.

Uploaded by

arunv1994
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views1 page

Test

The document is a React component named DocumentViewer that displays different types of documents based on their file extension. It supports PDF files by using the @react-pdf-viewer library and displays DOC or DOCX files using Google Docs viewer. If the file type is unsupported, it shows an error message indicating the unsupported file type.

Uploaded by

arunv1994
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

import React from 'react';

import { Worker, Viewer } from '@react-pdf-viewer/core';


import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

// Helper function to detect file type


const getFileExtension = (url) => {
return url.split('.').pop().split('?')[0].toLowerCase();
};

const DocumentViewer = ({ fileUrl }) => {


if (!fileUrl) {
return <p>No document provided.</p>;
}

const extension = getFileExtension(fileUrl);

if (extension === 'pdf') {


return (
<div style={{ height: '80vh', width: '100%' }}>
<Worker workerUrl={`https://unpkg.com/[email protected]/build/pdf.worker.min.js`}>
<Viewer fileUrl={fileUrl} />
</Worker>
</div>
);
} else if (['doc', 'docx'].includes(extension)) {
return (
<iframe
src={`https://docs.google.com/gview?url=${fileUrl}&embedded=true`}
style={{ width: '100%', height: '80vh', border: 'none' }}
title="DOC Viewer"
/>
);
} else {
return <p>Unsupported file type: {extension}</p>;
}
};

export default DocumentViewer;

You might also like