npm package: @ribinmathew/file-viewer
Description: Reusable medical file viewer for PDF, images, and DICOM with tools.
Latest version: 0.5.5

# 📦 @ribinmathew/file-viewer

A modern, lightweight, and extensible file viewer for React & Next.js applications. Built with TypeScript for type safety and developer experience.

Currently supports image viewing with planned support for PDF, DICOM, and additional medical imaging formats.

---

## ✨ Features

- **🎯 Simple API** – Clean, intuitive interface
- **📘 Fully Typed** – Complete TypeScript support
- **🖼️ Image Viewer** – High-quality image rendering
- **🎨 Tailwind Ready** – Works seamlessly with Tailwind CSS
- **⚡ Next.js Compatible** – Full App Router support
- **🔌 Extensible** – Easy to add custom file types

### 🚧 Coming Soon

- PDF viewing (PDF.js integration)
- DICOM medical imaging (Cornerstone.js)
- Side-by-side file comparison
- Interactive toolbar (zoom, rotate, pan, download)
- Video playback support

---

## 📥 Installation
```bash
npm install @ribinmathew/file-viewer
```

---

## 🚀 Quick Start
```tsx
import { FileViewer } from "@ribinmathew/file-viewer";

export default function Demo() {
  return (
    <FileViewer
      file={{
        type: "image",
        url: "https://images.unsplash.com/photo-1530026405186-ed1f139313f8?w=800",
        label: "Sample Image",
      }}
    />
  );
}
```

---

## 📚 API Reference

### `<FileViewer />` Props

| Prop        | Type         | Required | Description                          |
|-------------|--------------|----------|--------------------------------------|
| `file`      | `FileSource` | ✔        | File configuration object            |
| `className` | `string`     | ✖        | Custom CSS classes for the wrapper   |

### `FileSource` Type
```typescript
type FileSource = {
  type: "image"; // "pdf" | "dicom" coming soon
  url: string;
  label?: string;
};
```

---

## 🧩 Supported File Types

| Format | Status | Viewer Component |
|--------|--------|------------------|
| Image  | ✅     | `ImageViewer`    |
| PDF    | 🔜     | `PdfViewer`      |
| DICOM  | 🔜     | `DicomViewer`    |
| Video  | 🔜     | `VideoViewer`    |

---

## 🎨 Styling & Customization

The component works seamlessly with Tailwind CSS and custom styles:
```tsx
<FileViewer
  className="rounded-xl shadow-lg border border-gray-200"
  file={{
    type: "image",
    url: "/assets/medical-scan.jpg",
    label: "Patient X-Ray",
  }}
/>
```

---

## 💡 Usage Examples

### Basic Image Viewer
```tsx
<FileViewer
  file={{
    type: "image",
    url: "https://picsum.photos/800/600",
    label: "Random Photo",
  }}
/>
```

### With Custom Styling
```tsx
<FileViewer
  className="max-w-4xl mx-auto my-8 rounded-2xl overflow-hidden"
  file={{
    type: "image",
    url: "/images/hero-banner.png",
  }}
/>
```

---

## 🛠️ Development

### Build the Package
```bash
npm run build
```

### Local Testing

Create a tarball for testing in other projects:
```bash
npm pack
```

Install the packed version in your test project:
```bash
npm install ../file-viewer/@ribinmathew-file-viewer-0.1.0.tgz
```

---

## 🗺️ Roadmap

| Feature               | Status |
|-----------------------|--------|
| Image viewer          | ✅     |
| PDF viewer            | 🔜     |
| DICOM viewer          | 🔜     |
| File comparison mode  | 🔜     |
| Zoom & pan controls   | 🔜     |
| Interactive toolbar   | 🔜     |
| Annotation support    | 🔜     |

---

## 🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

---

## 📄 License

MIT © 2025 [Ribin Mathew]

---

## 🔗 Links

- [GitHub Repository](#)
- [NPM Package](https://www.npmjs.com/package/@ribinmathew/file-viewer)
- [Report Issues](#)