feat: webp support

Author: alantoa

package.json

@@ -83,8 +83,7 @@
   },
   "peerDependencies": {
     "react": ">=16.13.1",
-    "react-dom": ">=16.13.1",
-    "react-pdf": ">=7"
+    "react-dom": ">=16.13.1"
   },
   "resolutions": {
     "typescript": "^5.2.2"

src/DocViewer.stories.tsx

@@ -7,6 +7,8 @@ import pdfMultiplePagesFile from "./exampleFiles/pdf-multiple-pages-file.pdf";
 import pngFile from "./exampleFiles/png-image.png";
 import csvFile from "./exampleFiles/csv-file.csv";
 import epsFile from "./exampleFiles/eps-file.eps";
+import webpFile from "./exampleFiles/webp-file.webp";
+
 import { DocViewerRef, IDocument } from ".";
 
 /* eslint-disable import/no-anonymous-default-export */
@@ -19,6 +21,7 @@ const docs: IDocument[] = [
   { uri: pngFile },
   { uri: csvFile },
   { uri: pdfMultiplePagesFile },
+  { uri: webpFile },
 ];
 
 export const Default = () => (

src/exampleFiles/webp-file.webp

@@ -9,6 +9,7 @@ import TXTRenderer from "./txt";
 import CSVRenderer from "./csv";
 import GIFRenderer from "./gif";
 import VideoRenderer from "./video";
+import WebPRenderer from "./webp";
 
 export const DocViewerRenderers = [
   BMPRenderer,
@@ -22,6 +23,7 @@ export const DocViewerRenderers = [
   CSVRenderer,
   GIFRenderer,
   VideoRenderer,
+  WebPRenderer,
 ];
 
 export {
@@ -36,4 +38,5 @@ export {
   CSVRenderer,
   GIFRenderer,
   VideoRenderer,
+  WebPRenderer,
 };

src/renderers/index.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DocRenderer } from "../..";
+import ImageProxyRenderer from "../image";
+
+const WebPRenderer: DocRenderer = (props) => <ImageProxyRenderer {...props} />;
+
+WebPRenderer.fileTypes = ["webp", "image/webp"];
+WebPRenderer.weight = 0;
+
+export default WebPRenderer;