@imparth/react-file-viewer/README.md

Extendable file viewer for web that preview images, pdf and text files via file object or web url

# @imparth/react-file-viewer

🚀 **@imparth/react-file-viewer** is an extendable and lightweight file viewer for the web. It enables you to preview images, PDFs, and text files seamlessly using either file objects or web URLs. Built with **React**, **TypeScript**, and **TailwindCSS**, this component is designed for modern web applications.

---


## Features

- 🌟 **File Object & URL Support**: Preview files from both local and remote sources.
- 🖼️ **Image, PDF, & Text Preview**: Supports common file formats with clean and responsive rendering.
- 🛠️ **Customizable**: Easily adapt dimensions, styles, and error handling to suit your project.
- 📦 **Built with TypeScript**: Enjoy strong type definitions for seamless development.
- ⚡ **Lightweight & Performant**: Optimized for modern React applications.
- 🎨 **TailwindCSS Integration**: Comes with built-in styles for quick customization.

---


## Installation

Install the package via npm or yarn:

```bash
npm install @imparth/react-file-viewer
# or
yarn add @imparth/react-file-viewer
```

---


## Usage

Here’s a basic example to get started:

### Basic Usage

```tsx
import React from "react";
import FileViewer from "@imparth/react-file-viewer";

const App = () => {
  return (
    <div style={{ maxWidth: "500px", margin: "0 auto" }}>
      <FileViewer
        type="url"
        url="https://via.placeholder.com/424"
        width="424px"
        height="424px"
      />
    </div>
  );
};

export default App;
```

### Advanced Usage

Handle file inputs dynamically and manage errors with ease:

```tsx
import React, { useState } from "react";
import FileViewer from "@imparth/react-file-viewer";

const App = () => {
  const [file, setFile] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFile(e.target.files?.[0] || null);
  };

  const handleError = (message: string | Error) => {
    console.error("FileViewer Error:", message);
  };

  return (
    <div style={{ maxWidth: "500px", margin: "0 auto" }}>
      <input type="file" onChange={handleFileChange} />
      <FileViewer
        type="file"
        file={file}
        width="500px"
        height="500px"
        onError={handleError}
      />
    </div>
  );
};

export default App;
```

---


## Props

| Prop               | Type                                     | Default                       | Description                                                                                  |
|--------------------|------------------------------------------|-------------------------------|----------------------------------------------------------------------------------------------|
| `type`             | `"url" \| "file"`                         | `"url"`                       | Determines whether the input is a file or a URL.                                             |
| `file`             | `File`                                  | `null`                        | The file to preview when `type` is `"file"`.                                                |
| `url`              | `string`                                | `""`                          | The URL to preview when `type` is `"url"`.                                                  |
| `width`            | `string`                                | `"424px"`                     | Width of the preview container.                                                             |
| `height`           | `string`                                | `"424px"`                     | Height of the preview container.                                                            |
| `invalidExtensions`| `string[]`                              | Common executable extensions  | Array of invalid file extensions (e.g., `.exe`, `.bat`).                                     |
| `styles`           | `object`                                | Default styles (see below)    | Custom styles for the container, SVG icon, and no preview text.                              |
| `onError`          | `(message: string \| Error) => void`     | `undefined`                   | Callback for handling errors, such as invalid file types.                                    |

---


### Default Invalid Extensions

```typescript
[
  "exe", "scr", "msi", "bat", "sh", "cmd", "com", "dll", 
  "pif", "vb", "vbe", "vbs", "ws", "wsc", "wsf", "wsh"
];
```

---


## About the Author

👨‍💻 **Parth Dudhatra**  
Hi, I'm Parth Dudhatra, a passionate developer and creator of `@imparth/react-file-viewer`. My goal is to build tools that make developers' lives easier.  
Follow me on [GitHub](https://github.com/imparth7) or connect with me on [Twitter / X](https://x.com/imparth73) to stay updated on my latest projects.

---


## Contributing

Contributions are welcome! If you find a bug, have an idea for improvement, or want to collaborate, feel free to open an issue or submit a pull request on [GitHub](https://github.com/imparth7/react-file-viewer).

---


## License

This project is licensed under the [MIT License](LICENSE).

---


## Support

For support or inquiries, feel free to contact me via email: [**imparth.dev@example.com**](mailto:imparth.dev@example.com) or open an issue on the [GitHub repository](https://github.com/imparth7/react-file-viewer).

---


## Acknowledgments

Thanks for using `@imparth/react-file-viewer`! If you find this project helpful, don't forget to star the repository on GitHub. ⭐