React Document Preview

A React component for rendering previews of PDF documents, Word documents, and images with thumbnail generation support.

Installation

npm install react-document-preview
# or
yarn add react-document-preview

Features

• Supports PDF, Word documents, and image previews
• Generates thumbnails for PDF and Word documents
• Customizable dimensions
• Loading states and error handling
• Download button for documents
• Responsive design

Usage

import { DocumentPreview } from 'react-document-preview';

function App() {
  return (
    <DocumentPreview
      url="https://example.com/document.pdf"
      width={300}
      height={210}
      documentType="pdf"
    />
  );
}

Props

Prop	Type	Default	Description
file	File | null	undefined	File object for local document preview
url	string	undefined	URL of the document to preview
width	number	300	Width of the preview container
height	number	210	Height of the preview container
documentType	"pdf" | "image" | "word"	Required	Type of document being previewed

Examples

PDF Preview

// Preview PDF from URL
<DocumentPreview
  url="https://example.com/document.pdf"
  documentType="pdf"
/>

// Preview PDF from File object
<DocumentPreview
  file={pdfFile}
  documentType="pdf"
/>

Word Document Preview

<DocumentPreview
  url="https://example.com/document.docx"
  documentType="word"
/>

Image Preview

<DocumentPreview
  url="https://example.com/image.jpg"
  documentType="image"
/>

Custom Styling

The component comes with default styling but can be customized using the styles object:

const customStyles = {
  container: (width: number, height: number) => ({
    width,
    height,
    borderRadius: 12,
    outline: "2px solid dodgerblue",
    // Add your custom styles here
  }),
};

Dependencies

• React 16.8+
• pdfjs-dist
• lucide-react

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Nitin Jaswal