File Viewer Modal

A beautiful, feature-rich file viewer modal for React applications supporting images, videos, PDFs, and audio files.

Features

• 🖼️ Image Viewer with zoom in/out and pan functionality
• 🎬 Video Player with native controls
• 📄 PDF Viewer with page navigation
• 🎵 Audio Player with native controls
• 🎯 Auto-detects file types from URLs or Blobs
• 🎨 Beautiful animations and transitions
• ⌨️ Keyboard navigation (Arrow keys, ESC)
• 📱 Responsive design
• 🔄 Thumbnail grid for quick navigation

Installation

npm install @tejas.solanki/file-viewer

Usage

import React, { useState } from 'react';
import { FileViewerModal } from '@tejas.solanki/file-viewer';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  
  const files = [
    { url: 'https://example.com/image.jpg' },
    { url: 'https://example.com/video.mp4' },
    { url: 'https://example.com/document.pdf' },
    { blob: myBlob, name: 'audio.mp3', type: 'audio/mp3' }
  ];

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Viewer</button>
      
      <FileViewerModal
        files={files}
        startIndex={0}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      />
    </div>
  );
}

API

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | files | FileItem[] | Yes | Array of files to display | | startIndex | number | No | Index of the file to display first (default: 0) | | isOpen | boolean | Yes | Whether the modal is open | | onClose | () => void | Yes | Callback when modal is closed |

FileItem

interface FileItem {
  url?: string;        // URL of the file
  blob?: Blob;         // Blob object of the file
  name?: string;       // Display name
  type?: string;       // MIME type
}

Keyboard Shortcuts

• ← Previous file
• → Next file
• ESC Close modal

Supported File Types

Images

• JPG, JPEG, PNG, GIF, WebP, SVG, BMP

Videos

• MP4, WebM, OGG, MOV

Audio

• MP3, WAV, OGG, AAC, M4A

Documents

• PDF

License

MIT