File Previewer

React file previewer modal for image, video, audio, and PDF files.

Install

npm i @iammrverma/file-previewer

Usage

import { useState } from "react";
import { FilePreviewer, type PreviewFile } from "@iammrverma/file-previewer;
import "@iammrverma/file-previewerstyles.css";

const files: PreviewFile[] = [
  {
    id: "1",
    name: "photo.jpg",
    url: "https://example.com/photo.jpg",
    mimeType: "image/jpeg"
  }
];

export function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open preview</button>
      <FilePreviewer open={open} files={files} onClose={() => setOpen(false)} />
    </>
  );
}

API

• FilePreviewer
• PreviewFile type
• PreviewFileKind type
• getFileKind(mimeType)