@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:

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

Usage

Here’s a basic example to get started:

Basic Usage

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:

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

[
  "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 or connect with me on Twitter / X 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.

License

This project is licensed under the MIT License.

Support

For support or inquiries, feel free to contact me via email: [email protected] or open an issue on the GitHub repository.

Acknowledgments

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