react-file-preview-engine 0.0.1

package/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Sahil Aggarwal, <aggarwalsahil2004@gmail.com>
+Copyright (c) 2022 Igor Gaponov (gapon2401)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,312 @@
+# react-file-preview-engine
+
+A renderer driven React file preview engine designed for extensibility, correctness, and long term maintainability.
+
+`react-file-preview-engine` lets you preview files by delegating rendering to small, isolated renderers that decide if they can handle a file based on runtime context. It supports common media types out of the box and makes it trivial to add or override renderers for custom formats.
+
+## Why react-file-preview-engine
+
+Inspired by [`@codesmith-99/react-file-preview`](https://github.com/AbdulmueezEmiola/React-File-Previewer) and redesigned to address its architectural and maintenance limitations.
+
+- Renderer driven architecture instead of hard coded conditional rendering
+- Built in support for images, video, audio, pdf, html, and plain text
+- Automatic MIME type resolution using file name when needed
+- Supports multiple file source types including URL, File, Blob, and ArrayBuffer
+- Stable loading, ready, and error state handling
+- Abortable fetches with proper cleanup for fast file switching
+- First class support for custom renderers
+- Optional, fully typed additional render context
+- Pluggable error renderer
+- Fully typed public API
+- React is not bundled as a direct dependency
+- Actively maintained and designed for long term extensibility
+
+## Installation
+
+```bash
+# npm
+npm install react-file-preview-engine
+
+# yarn
+yarn add react-file-preview-engine
+
+# pnpm
+pnpm add react-file-preview-engine
+
+# bun
+bun add react-file-preview-engine
+```
+
+## Usage
+
+`react-file-preview-engine` exposes a single default export, the `<FilePreviewer />` component.
+
+You can pass it a file source and basic file metadata. The source can be a `URL`, `File`, `Blob`, or `ArrayBuffer`. Using the provided MIME type or file name, the engine dynamically resolves the most suitable renderer at runtime.
+
+### Basic Usage
+
+This is the minimal setup. The previewer automatically infers the MIME type from `fileName` if not provided.
+
+```tsx
+import React from "react";
+import FilePreviewer from "react-file-preview-engine";
+
+export default function App() {
+  return <FilePreviewer src="https://example.com/sample.pdf" fileName="sample.pdf" />;
+}
+```
+
+### Previewing Local Files
+
+You can preview files selected by the user without uploading them first. The engine automatically converts File, Blob, and ArrayBuffer sources to object URLs internally.
+
+```tsx
+import React, { useState } from "react";
+import FilePreviewer from "react-file-preview-engine";
+
+export default function App() {
+  const [file, setFile] = useState<File>();
+
+  return (
+    <>
+      <input type="file" onChange={(e) => setFile(e.target.files?.[0])} />
+      {file && <FilePreviewer src={file} fileName={file.name} mimeType={file.type} />}
+    </>
+  );
+}
+```
+
+### Providing MIME Type Explicitly
+
+If you already know the MIME type, you can pass it directly. This ensures the engine uses the correct renderer even when inference is not possible.
+
+```tsx
+import React from "react";
+import FilePreviewer from "react-file-preview-engine";
+
+export default function App() {
+  return <FilePreviewer src={new Blob(["Hello world"], { type: "text/plain" })} mimeType="text/plain" fileName="hello.txt" />;
+}
+```
+
+### Handling Load and Error Events
+
+You can listen to lifecycle events triggered by the active renderer.
+
+```tsx
+import React from "react";
+import FilePreviewer from "react-file-preview-engine";
+
+export default function App() {
+  return (
+    <FilePreviewer
+      src="/document.pdf"
+      fileName="document.pdf"
+      onLoad={() => {
+        console.log("File loaded");
+      }}
+      onError={() => {
+        console.error("Failed to load file");
+      }}
+    />
+  );
+}
+```
+
+### Auto Play Media Files
+
+For audio and video files, you can enable auto play.
+
+```tsx
+import React from "react";
+import FilePreviewer from "react-file-preview-engine";
+
+export default function App() {
+  return <FilePreviewer src="https://example.com/video.mp4" fileName="video.mp4" autoPlay={true} />;
+}
+```
+
+### Partial Customization
+
+You can customize the loader, container props, and icon props without modifying any renderers.
+
+```tsx
+import React from "react";
+import FilePreviewer from "react-file-preview-engine";
+
+export default function App() {
+  return (
+    <FilePreviewer
+      src="/image.jpg"
+      fileName="image.jpg"
+      loader={<div>Loading preview…</div>}
+      containerProps={{ style: { border: "1px solid #e5e7eb", padding: 8 } }}
+      iconProps={{ style: { fontSize: 48 } }}
+    />
+  );
+}
+```
+
+### Custom Error Renderer
+
+When a renderer reports an error, the previewer switches to `errorRenderer`.
+
+```tsx
+import React from "react";
+import FilePreviewer from "react-file-preview-engine";
+
+const errorRenderer = {
+  Component() {
+    return <div>Preview unavailable</div>;
+  },
+};
+
+export default function App() {
+  return <FilePreviewer src="/missing.pdf" fileName="missing.pdf" errorRenderer={errorRenderer} />;
+}
+```
+
+### Custom Renderers
+
+`react-file-preview-engine` resolves previews using renderers. A renderer declares whether it can handle a file using `canRender` and renders the preview inside its `Component`.
+
+Renderers receive a render context that includes `src`, `mimeType`, `fileName`, lifecycle callbacks, and any values passed via `additionalContext`. The same context mechanism applies to `customRenderers` and `errorRenderer`.
+
+#### Renderer Resolution Order
+
+When previewing a file, the engine checks renderers in this order:
+
+1. Your `customRenderers` (from first to last)
+2. Built-in default renderers
+3. `fallbackRenderer` (icon fallback)
+
+This means you can **override** built-in renderers by providing a custom renderer with the same `canRender` logic.
+
+#### Markdown Renderer Example
+
+This example adds support for markdown files. By default, it renders markdown as html, but allows switching to raw text using `additionalContext`.
+
+```tsx
+import React, { useEffect, useState } from "react";
+import FilePreviewer from "react-file-preview-engine";
+import type { Renderer } from "react-file-preview-engine/types";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import { useRemark } from "react-remarkify";
+import rehypeSanitize from "rehype-sanitize";
+
+const markdownRenderer: Renderer<{ renderAsHtml?: boolean }> = {
+  name: "markdown",
+  canRender({ mimeType }) {
+    return mimeType === "text/markdown";
+  },
+  Component({ src, onLoad, onError, renderAsHtml = true }) {
+    const [markdown, setMarkdown] = useState("");
+
+    useEffect(() => {
+      const controller = new AbortController();
+
+      fetch(src, { signal: controller.signal })
+        .then((res) => res.text())
+        .then((text) => {
+          setMarkdown(text);
+          onLoad();
+        })
+        .catch(onError);
+
+      return () => controller.abort();
+    }, [src]);
+
+    const reactContent = useRemark({
+      markdown,
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeRaw, rehypeSanitize],
+      remarkToRehypeOptions: { allowDangerousHtml: true },
+    });
+
+    return renderAsHtml ? <div>{reactContent}</div> : <pre>{markdown}</pre>;
+  },
+};
+
+export default function App() {
+  return <FilePreviewer src="/README.md" fileName="README.md" customRenderers={[markdownRenderer]} />;
+}
+```
+
+#### Passing Additional Context
+
+```tsx
+export default function App() {
+  return <FilePreviewer src="/README.md" fileName="README.md" customRenderers={[markdownRenderer]} additionalContext={{ renderAsHtml: false }} />;
+}
+```
+
+#### Default Renderers
+
+The library includes built-in renderers for text, pdf, html, images, audio, and video. These handle common file types without any configuration.
+
+You can explore the actual renderer definitions in the [`defaultRenderers` constant on GitHub](https://github.com/SahilAggarwal2004/react-file-preview-engine/blob/main/src/lib/rendererRegistry.tsx).
+
+## API Reference
+
+### FilePreviewer Props
+
+| Prop                | Type                            | Required | Default                                                                                                                     | Description                                             |
+| ------------------- | ------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| `src`               | [`FileSource`](#filesource)     | Yes      | –                                                                                                                           | Source URL of the file to preview                       |
+| `mimeType`          | `string`                        | No       | inferred                                                                                                                    | MIME type of the file                                   |
+| `fileName`          | `string`                        | No       | -                                                                                                                           | Used for MIME inference and accessibility               |
+| `autoPlay`          | `boolean`                       | No       | `false`                                                                                                                     | Auto play audio and video                               |
+| `loader`            | `ReactNode`                     | No       | [`<Loader />`](https://github.com/SahilAggarwal2004/react-file-preview-engine/blob/main/src/components.tsx)                 | Shown while the file is loading                         |
+| `customRenderers`   | [`Renderer[]`](#renderer)       | No       | -                                                                                                                           | Additional or overriding renderers                      |
+| `additionalContext` | `object`                        | No       | -                                                                                                                           | Extra data passed to renderers, including errorRenderer |
+| `errorRenderer`     | [`Renderer`](#renderer)         | No       | [`fallbackRenderer`](https://github.com/SahilAggarwal2004/react-file-preview-engine/blob/main/src/lib/rendererRegistry.tsx) | Renderer used on error                                  |
+| `containerProps`    | [`DivProps`](#divprops)         | No       | -                                                                                                                           | Props applied to preview container                      |
+| `iconProps`         | [`DivProps`](#divprops)         | No       | -                                                                                                                           | Props applied to fallback icon                          |
+| `onLoad`            | [`Eventhandler`](#eventhandler) | No       | –                                                                                                                           | Called when preview is ready                            |
+| `onError`           | [`Eventhandler`](#eventhandler) | No       | –                                                                                                                           | Called when preview fails                               |
+
+## Types
+
+### DivProps
+
+```typescript
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+```
+
+### EventHandler
+
+```ts
+export type EventHandler = () => void;
+```
+
+### FileSource
+
+```ts
+export type FileSource = string | File | Blob | ArrayBuffer;
+```
+
+### Renderer
+
+```ts
+type RenderContext<T extends object = {}> = {
+  src: string;
+  mimeType: string;
+  fileName: string;
+  autoPlay: boolean;
+  iconProps: DivProps;
+  onLoad: () => void;
+  onError: () => void;
+} & T;
+type Renderer<T extends object = {}> = {
+  name?: string;
+  canRender?(ctx: RenderContext<T>): boolean;
+  Component(ctx: RenderContext<T>): JSX.Element;
+};
+```
+
+## Author
+
+[Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FilePreviewerProps } from './types.js';
+
+declare function FilePreviewer<T extends object = {}>({ src, mimeType, fileName, autoPlay, loader, customRenderers, additionalContext, errorRenderer, containerProps, iconProps, onLoad, onError, }: FilePreviewerProps<T>): React.JSX.Element;
+
+export { FilePreviewer as default };

package/dist/index.js

@@ -0,0 +1,240 @@
+import Mime from 'mime/lite';
+import React2, { useMemo, useState, useRef, useEffect } from 'react';
+import { FileIcon, defaultStyles } from 'react-file-icon';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function Loader({ children, text }) {
+  return /* @__PURE__ */ React2.createElement("div", { className: "rfpe-loader" }, /* @__PURE__ */ React2.createElement("div", { className: "rfpe-loader-spinner" }), children != null ? children : /* @__PURE__ */ React2.createElement("div", { className: "rfpe-loader-text" }, text));
+}
+
+// src/constants.ts
+var defaults = { additionalContext: {}, customRenderers: [], props: {} };
+function useResolvedSrc(src) {
+  const objectUrlRef = useRef(null);
+  const revokeObjectURL = () => {
+    if (!objectUrlRef.current) return;
+    URL.revokeObjectURL(objectUrlRef.current);
+    objectUrlRef.current = null;
+  };
+  const resolvedSrc = useMemo(() => {
+    revokeObjectURL();
+    if (typeof src === "string") return src;
+    const url = src instanceof File || src instanceof Blob ? URL.createObjectURL(src) : src instanceof ArrayBuffer ? URL.createObjectURL(new Blob([src])) : "";
+    if (url) objectUrlRef.current = url;
+    return url;
+  }, [src]);
+  useEffect(() => revokeObjectURL, []);
+  return resolvedSrc;
+}
+
+// src/lib/utils.ts
+var composeClass = (baseClass, props) => `${baseClass}${(props == null ? void 0 : props.className) ? " " + props.className : ""}`;
+var composeProps = (baseClass, props, overrideProps) => {
+  const mergedProps = __spreadValues(__spreadValues({}, props), overrideProps);
+  return __spreadProps(__spreadValues({}, mergedProps), {
+    style: __spreadValues(__spreadValues({}, props == null ? void 0 : props.style), overrideProps == null ? void 0 : overrideProps.style),
+    className: composeClass(baseClass, mergedProps)
+  });
+};
+function fetchResource(src, type, signal) {
+  return __async(this, null, function* () {
+    const res = yield fetch(src, { signal });
+    if (!res.ok) throw new Error();
+    return res[type]();
+  });
+}
+
+// src/lib/rendererRegistry.tsx
+var audioRenderer = {
+  canRender: ({ mimeType }) => mimeType.startsWith("audio/"),
+  Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
+    return /* @__PURE__ */ React2.createElement("audio", { controls: true, autoPlay, onCanPlay: onLoad, onError, style: { width: "100%" }, "aria-label": fileName || "Audio preview" }, /* @__PURE__ */ React2.createElement("source", { src, type: mimeType }));
+  }
+};
+var fallbackRenderer = {
+  Component({ mimeType, iconProps, onLoad }) {
+    const extension = useMemo(() => {
+      var _a;
+      return (_a = Mime.getExtension(mimeType)) != null ? _a : "";
+    }, [mimeType]);
+    useEffect(() => {
+      onLoad();
+    }, []);
+    return /* @__PURE__ */ React2.createElement("div", __spreadValues({}, composeProps("rfpe-icon", iconProps)), /* @__PURE__ */ React2.createElement(FileIcon, __spreadValues({ extension }, defaultStyles[extension])));
+  }
+};
+var htmlRenderer = {
+  canRender: ({ mimeType }) => mimeType === "text/html",
+  Component({ src, onLoad, onError }) {
+    const [data, setData] = useState("");
+    useEffect(() => {
+      const controller = new AbortController();
+      fetchResource(src, "text", controller.signal).then((data2) => {
+        setData(data2);
+        onLoad();
+      }).catch(onError);
+      return () => controller.abort();
+    }, [src]);
+    return /* @__PURE__ */ React2.createElement("iframe", { src: `data:text/html; charset=utf-8,${encodeURIComponent(data)}`, sandbox: "", className: "rfpe-iframe" });
+  }
+};
+var imageRenderer = {
+  canRender: ({ mimeType }) => mimeType.startsWith("image/"),
+  Component({ src, fileName, onLoad, onError }) {
+    return /* @__PURE__ */ React2.createElement("img", { src, alt: fileName || "Image preview", onLoad, onError, style: { width: "100%", height: "100%" } });
+  }
+};
+var pdfRenderer = {
+  canRender: ({ mimeType }) => mimeType === "application/pdf",
+  Component({ src, onLoad, onError }) {
+    const [data, setData] = useState("");
+    useEffect(() => {
+      const controller = new AbortController();
+      let objectUrl;
+      fetchResource(src, "arrayBuffer", controller.signal).then((buffer) => {
+        const blob = new Blob([buffer], { type: "application/pdf" });
+        objectUrl = URL.createObjectURL(blob);
+        setData(objectUrl);
+        onLoad();
+      }).catch(onError);
+      return () => {
+        controller.abort();
+        if (objectUrl) URL.revokeObjectURL(objectUrl);
+      };
+    }, [src]);
+    return /* @__PURE__ */ React2.createElement("iframe", { src: data, className: "rfpe-iframe" });
+  }
+};
+var textRenderer = {
+  canRender: ({ mimeType }) => mimeType === "text/plain",
+  Component({ src, onLoad, onError }) {
+    const [data, setData] = useState("");
+    useEffect(() => {
+      const controller = new AbortController();
+      fetchResource(src, "text", controller.signal).then((data2) => {
+        setData(data2);
+        onLoad();
+      }).catch(onError);
+      return () => controller.abort();
+    }, [src]);
+    return /* @__PURE__ */ React2.createElement("div", { style: { width: "100%", height: "100%", overflow: "auto", whiteSpace: "pre-wrap" } }, data);
+  }
+};
+var videoRenderer = {
+  canRender: ({ mimeType }) => mimeType.startsWith("video/"),
+  Component({ src, mimeType, fileName, autoPlay, onLoad, onError }) {
+    return /* @__PURE__ */ React2.createElement("video", { controls: true, autoPlay, onCanPlay: onLoad, onError, style: { width: "100%", height: "100%" }, "aria-label": fileName || "Video preview" }, /* @__PURE__ */ React2.createElement("source", { src, type: mimeType }));
+  }
+};
+var defaultRenderers = [textRenderer, pdfRenderer, htmlRenderer, imageRenderer, audioRenderer, videoRenderer];
+function resolveRenderer(customRenderers, ctx) {
+  var _a;
+  return (_a = customRenderers.concat(defaultRenderers).find((r) => {
+    var _a2;
+    return (_a2 = r.canRender) == null ? void 0 : _a2.call(r, ctx);
+  })) != null ? _a : fallbackRenderer;
+}
+
+// src/styles.css
+function injectStyle(css) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (head.firstChild) {
+    head.insertBefore(style, head.firstChild);
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+injectStyle(".rfpe-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  max-width: 100lvw;\n}\n.rfpe-icon {\n  width: 50px;\n  height: 50px;\n}\n.rfpe-iframe {\n  width: 100%;\n  height: 100%;\n  background-color: white;\n}\n.rfpe-loader {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.rfpe-loader-spinner {\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  border-top-color: black;\n  border-bottom-color: black;\n  animation: rfpe-spin-fast 0.6s ease infinite;\n}\n.rfpe-loader-text {\n  font-size: 0.875rem;\n}\n@keyframes rfpe-spin-fast {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
+
+// src/index.tsx
+var { additionalContext: defaultContext, customRenderers: defaultRenderers2, props: defaultProps } = defaults;
+function FilePreviewer({
+  src,
+  mimeType,
+  fileName = "",
+  autoPlay = false,
+  loader = /* @__PURE__ */ React2.createElement(Loader, null),
+  customRenderers = defaultRenderers2,
+  additionalContext = defaultContext,
+  errorRenderer = fallbackRenderer,
+  containerProps = defaultProps,
+  iconProps = defaultProps,
+  onLoad,
+  onError
+}) {
+  const resolvedSrc = useResolvedSrc(src);
+  const fileType = useMemo(() => {
+    var _a;
+    return (_a = mimeType != null ? mimeType : Mime.getType(fileName)) != null ? _a : "";
+  }, [mimeType, fileName]);
+  const fileKey = `${resolvedSrc}|${fileType}|${fileName}`;
+  const [state, setState] = useState({ key: fileKey, status: "loading" });
+  if (state.key !== fileKey) setState({ key: fileKey, status: "loading" });
+  const isLoading = state.status === "loading";
+  const handleLoad = () => {
+    setState((prev) => {
+      if (prev.key !== fileKey || prev.status !== "loading") return prev;
+      onLoad == null ? void 0 : onLoad();
+      return { key: fileKey, status: "ready" };
+    });
+  };
+  const handleError = () => {
+    setState((prev) => {
+      if (prev.key !== fileKey || prev.status === "error") return prev;
+      onError == null ? void 0 : onError();
+      return { key: fileKey, status: "error" };
+    });
+  };
+  const context = __spreadValues({ src: resolvedSrc, mimeType: fileType, fileName, autoPlay, iconProps, onLoad: handleLoad, onError: handleError }, additionalContext);
+  const renderer = useMemo(() => resolveRenderer(customRenderers, context), [resolvedSrc, fileType, fileName, autoPlay, additionalContext]);
+  const ActiveRenderer = state.status === "error" ? errorRenderer : renderer;
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, isLoading && loader, /* @__PURE__ */ React2.createElement("div", __spreadValues({}, composeProps("rfpe-container", containerProps, { style: { visibility: isLoading ? "hidden" : "visible" } })), /* @__PURE__ */ React2.createElement(ActiveRenderer.Component, __spreadValues({ key: fileKey }, context))));
+}
+
+export { FilePreviewer as default };

package/dist/types.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode, DetailedHTMLProps, HTMLAttributes, JSX } from 'react';
+
+type LoaderProps = {
+    children?: ReactNode;
+    text?: string;
+};
+type EventHandler = () => void;
+type RenderBehaviour = {
+    autoPlay: boolean;
+    iconProps: DivProps;
+    onLoad: EventHandler;
+    onError: EventHandler;
+};
+type RenderContext<T extends object = {}> = {
+    src: string;
+    mimeType: string;
+    fileName: string;
+} & RenderBehaviour & T;
+type Renderer<T extends object = {}> = {
+    name?: string;
+    canRender?(ctx: RenderContext<T>): boolean;
+    Component(ctx: RenderContext<T>): JSX.Element;
+};
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type FetchType = "text" | "arrayBuffer" | "blob" | "json";
+type FilePreviewerProps<T extends object> = {
+    src: FileSource;
+    loader?: ReactNode;
+    customRenderers?: Renderer<T>[];
+    additionalContext?: T;
+    errorRenderer?: Renderer<T>;
+    containerProps?: DivProps;
+} & MimeTypeSource & RenderBehaviour;
+type FileSource = string | File | Blob | ArrayBuffer;
+type MimeTypeSource = {
+    mimeType: string;
+    fileName?: string;
+} | {
+    fileName: string;
+    mimeType?: string;
+};
+type State = {
+    key: string;
+    status: "loading" | "ready" | "error";
+};
+
+export type { DivProps, EventHandler, FetchType, FilePreviewerProps, FileSource, LoaderProps, MimeTypeSource, RenderBehaviour, RenderContext, Renderer, State };

package/dist/types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "react-file-preview-engine",
+  "version": "0.0.1",
+  "description": "A renderer-driven React file preview engine with extensible architecture for images, video, audio, PDF, HTML, and custom formats.",
+  "license": "MIT",
+  "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
+  "contributors": [],
+  "homepage": "https://github.com/SahilAggarwal2004/react-file-preview-engine#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SahilAggarwal2004/react-file-preview-engine.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SahilAggarwal2004/react-file-preview-engine/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./types": "./dist/types.js"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "mime": "^4.1.0",
+    "react-file-icon": "^1.6.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.10",
+    "@types/react-file-icon": "^1.0.4",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "keywords": [
+    "arraybuffer",
+    "audio-preview",
+    "blob",
+    "component",
+    "custom-renderer",
+    "document-viewer",
+    "extensible",
+    "file",
+    "file-preview",
+    "file-viewer",
+    "image-preview",
+    "mime-type",
+    "pdf-viewer",
+    "preview",
+    "react",
+    "react-file-preview-engine",
+    "renderer",
+    "typescript",
+    "video-preview",
+    "viewer"
+  ],
+  "scripts": {
+    "build": "pnpm i && pnpm run compile",
+    "compile": "tsup",
+    "dev": "tsup --watch"
+  }
+}