Add more frameworks examples 🎉 (#26)

* docs: update CHANGELOG

* docs: add vue example

* docs: add svelte example

* docs: add preact example

* docs: add react example

* chore: upgrade dependencies

examples/preact-ts/src/app.tsx

@@ -1,41 +1,96 @@
-import { useRef, useEffect } from "preact/hooks"
-import { createZoomImageHover } from "@zoom-image/core"
+import { useRef, useEffect, useState, useMemo } from "preact/hooks"
+import { createZoomImageHover, createZoomImageWheel } from "@zoom-image/core"
 
 function App() {
-  const imageContainerRef = useRef<HTMLDivElement>(null)
+  const [tabs, setTabs] = useState<
+    {
+      name: string
+      href: string
+      current: boolean
+      value: "wheel" | "hover"
+    }[]
+  >([
+    { name: "Zoom Image Wheel", href: "#", current: true, value: "wheel" },
+    { name: "Zoom Image Hover", href: "#", current: false, value: "hover" },
+  ])
+  const zoomType = useMemo(() => tabs.find((tab) => tab.current)?.value, [tabs])
+  const imageWheelContainerRef = useRef<HTMLDivElement>(null)
+  const imageHoverContainerRef = useRef<HTMLDivElement>(null)
   const zoomTargetRef = useRef<HTMLDivElement>(null)
 
+  const makeHandleTabClick = (tab: (typeof tabs)[0]) => () => {
+    setTabs(
+      tabs.map((t) => {
+        if (t.name === tab.name) {
+          return { ...t, current: true }
+        } else {
+          return { ...t, current: false }
+        }
+      }),
+    )
+  }
+
   useEffect(() => {
-    const imageContainer = imageContainerRef.current
-    const zoomTarget = zoomTargetRef.current
+    let cleanup: () => void = () => {}
 
-    if (!imageContainer) {
-      throw new Error("Image container not found")
+    if (zoomType === "hover") {
+      const imageContainer = imageHoverContainerRef.current as HTMLDivElement
+      const zoomTarget = zoomTargetRef.current as HTMLDivElement
+      const result = createZoomImageHover(imageContainer, {
+        zoomImageSource: "/large.webp",
+        customZoom: { width: 300, height: 500 },
+        zoomTarget,
+        scaleFactor: 0.5,
+      })
+      cleanup = result.cleanup
     }
 
-    if (!zoomTarget) {
-      throw new Error("Zoom target not found")
+    if (zoomType === "wheel") {
+      const imageContainer = imageWheelContainerRef.current as HTMLDivElement
+      const result = createZoomImageWheel(imageContainer)
+      cleanup = result.cleanup
     }
 
-    const { cleanup } = createZoomImageHover(imageContainer, {
-      zoomImageSource: "/large.webp",
-      customZoom: { width: 820, height: 820 },
-      zoomTarget,
-      scaleFactor: 0.5,
-    })
-
     return cleanup
-  }, [])
+  }, [zoomType])
 
   return (
-    <div class="wrapper">
-      <h1>Zoom Image Hover</h1>
-      <div class="demo-image-hover">
-        <div ref={imageContainerRef} id="image-hover-container" class="image-hover-container">
-          <img class="image-hover" alt="Small Pic" src="/small.webp" />
+    <div class="font-sans">
+      <nav class="flex space-x-4 pb-4" aria-label="Tabs">
+        {tabs.map((tab) => {
+          return (
+            <a
+              onClick={makeHandleTabClick(tab)}
+              key={tab.name}
+              href={tab.href}
+              class={
+                "rounded-md px-3 py-2 text-sm font-medium decoration-none " +
+                (tab.current ? "bg-gray-100 text-gray-700" : "text-gray-500 hover:text-gray-700")
+              }
+              aria-current={tab.current ? "page" : undefined}
+            >
+              {tab.name}
+            </a>
+          )
+        })}
+      </nav>
+
+      {zoomType === "wheel" && (
+        <div ref={imageWheelContainerRef} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
+          <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
+        </div>
+      )}
+
+      {zoomType === "hover" && (
+        <div
+          id="image-hover-container"
+          ref={imageHoverContainerRef}
+          class="relative flex items-start w-[250px] h-[250px]"
+        >
+          <img class="w-full h-full" alt="Small Pic" src="/small.webp" />
+          <div ref={zoomTargetRef} id="zoom-hover-target" class="absolute left-[300px]"></div>
         </div>
-        <div ref={zoomTargetRef} id="zoom-hover-target" class="zoom-hover-target"></div>
-      </div>
+      )}
     </div>
   )
 }

examples/preact-ts/src/main.tsx

@@ -1,5 +1,6 @@
+// eslint-disable-next-line import/no-unresolved
+import "uno.css"
 import { render } from "preact"
 import App from "./app.tsx"
-import "./index.css"
 
 render(<App />, document.getElementById("app") as HTMLElement)

examples/preact-ts/vite.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from "vite"
 import preact from "@preact/preset-vite"
+// eslint-disable-next-line import/no-unresolved
+import UnoCSS from "unocss/vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()],
+  plugins: [preact(), UnoCSS()],
 })

examples/react-ts/package.json

@@ -14,15 +14,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
+    "@types/react": "^18.2.4",
+    "@types/react-dom": "^18.2.3",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
     "@vitejs/plugin-react": "^4.0.0",
     "eslint": "^8.39.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.0",
+    "eslint-plugin-react-refresh": "^0.4.1",
     "typescript": "^5.0.4",
+    "unocss": "^0.51.8",
     "vite": "^4.3.4"
   }
 }

examples/react-ts/src/App.tsx

@@ -1,41 +1,98 @@
-import React from "react"
-import { createZoomImageHover } from "@zoom-image/core"
+import { useRef, useEffect, useState, useMemo } from "react"
+import { createZoomImageHover, createZoomImageWheel } from "@zoom-image/core"
 
 function App() {
-  const imageContainerRef = React.useRef<HTMLDivElement>(null)
-  const zoomTargetRef = React.useRef<HTMLDivElement>(null)
+  const [tabs, setTabs] = useState<
+    {
+      name: string
+      href: string
+      current: boolean
+      value: "wheel" | "hover"
+    }[]
+  >([
+    { name: "Zoom Image Wheel", href: "#", current: true, value: "wheel" },
+    { name: "Zoom Image Hover", href: "#", current: false, value: "hover" },
+  ])
+  const zoomType = useMemo(() => tabs.find((tab) => tab.current)?.value, [tabs])
+  const imageWheelContainerRef = useRef<HTMLDivElement>(null)
+  const imageHoverContainerRef = useRef<HTMLDivElement>(null)
+  const zoomTargetRef = useRef<HTMLDivElement>(null)
 
-  React.useEffect(() => {
-    const imageContainer = imageContainerRef.current
-    const zoomTarget = zoomTargetRef.current
+  const makeHandleTabClick = (tab: (typeof tabs)[0]) => () => {
+    setTabs(
+      tabs.map((t) => {
+        if (t.name === tab.name) {
+          return { ...t, current: true }
+        } else {
+          return { ...t, current: false }
+        }
+      }),
+    )
+  }
 
-    if (!imageContainer) {
-      throw new Error("Image container not found")
+  useEffect(() => {
+    let cleanup: () => void = () => {
+      // noop
     }
 
-    if (!zoomTarget) {
-      throw new Error("Zoom target not found")
+    if (zoomType === "hover") {
+      const imageContainer = imageHoverContainerRef.current as HTMLDivElement
+      const zoomTarget = zoomTargetRef.current as HTMLDivElement
+      const result = createZoomImageHover(imageContainer, {
+        zoomImageSource: "/large.webp",
+        customZoom: { width: 300, height: 500 },
+        zoomTarget,
+        scaleFactor: 0.5,
+      })
+      cleanup = result.cleanup
     }
 
-    const { cleanup } = createZoomImageHover(imageContainer, {
-      zoomImageSource: "/large.webp",
-      customZoom: { width: 820, height: 820 },
-      zoomTarget,
-      scaleFactor: 0.5,
-    })
+    if (zoomType === "wheel") {
+      const imageContainer = imageWheelContainerRef.current as HTMLDivElement
+      const result = createZoomImageWheel(imageContainer)
+      cleanup = result.cleanup
+    }
 
     return cleanup
-  }, [])
+  }, [zoomType])
 
   return (
-    <div className="wrapper">
-      <h1>Zoom Image Hover</h1>
-      <div className="demo-image-hover">
-        <div ref={imageContainerRef} id="image-hover-container" className="image-hover-container">
-          <img className="image-hover" alt="Small Pic" src="/small.webp" />
+    <div className="font-sans">
+      <nav className="flex space-x-4 pb-4" aria-label="Tabs">
+        {tabs.map((tab) => {
+          return (
+            <a
+              onClick={makeHandleTabClick(tab)}
+              key={tab.name}
+              href={tab.href}
+              className={
+                "rounded-md px-3 py-2 text-sm font-medium decoration-none " +
+                (tab.current ? "bg-gray-100 text-gray-700" : "text-gray-500 hover:text-gray-700")
+              }
+              aria-current={tab.current ? "page" : undefined}
+            >
+              {tab.name}
+            </a>
+          )
+        })}
+      </nav>
+
+      {zoomType === "wheel" && (
+        <div ref={imageWheelContainerRef} id="image-wheel-container" className="w-[300px] h-[300px] cursor-crosshair">
+          <img className="w-full h-full" alt="Large Pic" src="/large.webp" />
+        </div>
+      )}
+
+      {zoomType === "hover" && (
+        <div
+          id="image-hover-container"
+          ref={imageHoverContainerRef}
+          className="relative flex items-start w-[250px] h-[250px]"
+        >
+          <img className="w-full h-full" alt="Small Pic" src="/small.webp" />
+          <div ref={zoomTargetRef} id="zoom-hover-target" className="absolute left-[300px]"></div>
         </div>
-        <div ref={zoomTargetRef} id="zoom-hover-target" className="zoom-hover-target"></div>
-      </div>
+      )}
     </div>
   )
 }

examples/react-ts/src/main.tsx

@@ -1,7 +1,8 @@
+// eslint-disable-next-line import/no-unresolved
+import "uno.css"
 import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App.tsx"
-import "./index.css"
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>