fix(react): passing <img attributes

johannschopplich · Apr 20, 2023 · 2e2e959 · 2e2e959
1 parent a65a5a9
commit 2e2e959
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 27 deletions.
diff --git a/docs/integrations/react.md b/docs/integrations/react.md
@@ -26,9 +26,9 @@ import { LazyImage } from '@unlazy/react'
 export default function MyComponent() {
   return (
     <LazyImage
+      autoSizes
       src="data:image/svg+xml, ..."
       data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-      auto-sizes
     />
   )
 }
@@ -52,18 +52,22 @@ The `LazyImage` component accepts the following props:
 
 In both examples, the `sizes` attribute is automatically calculated.
 
-```html
-<!-- BlurHash -->
-<LazyImage
-  :blurhash="blurhash"
-  data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-  auto-sizes
-/>
-
-<!-- Encoded image in `src` attribute -->
-<LazyImage
-  src="data:image/svg+xml, ..."
-  data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-  auto-sizes
-/>
+```tsx
+return (
+  <>
+    {/* Blurhash in `blurhash` attribute */}
+    <LazyImage
+      blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
+      autoSizes
+      data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+    />
+
+    {/* Encoded image in `src` attribute */}
+    <LazyImage
+      autoSizes
+      src="data:image/svg+xml, ..."
+      data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+    />
+  </>
+)
 ```
diff --git a/packages/react/playground/App.tsx b/packages/react/playground/App.tsx
@@ -6,8 +6,8 @@ function App() {
       <div>
         <LazyImage
           blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
+          autoSizes={true}
           data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-          auto-sizes
           width="640"
           height="640"
         />

diff --git a/packages/react/playground/package.json b/packages/react/playground/package.json
@@ -1,9 +1,9 @@
 {
-    "private": true,
-    "type": "module",
-    "scripts": {
-      "dev": "vite",
-      "build": "vite build",
-      "preview": "vite preview"
-    }
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   }
+}
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -1,14 +1,21 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import type { ImgHTMLAttributes } from 'react'
 import { lazyLoad } from 'unlazy'
 import type { UnLazyLoadOptions } from 'unlazy'
 
-interface Props extends ImgHTMLAttributes<HTMLImageElement>, Pick<UnLazyLoadOptions, 'blurhashSize'> {
+interface Props
+  extends ImgHTMLAttributes<HTMLImageElement>,
+  Pick<UnLazyLoadOptions, 'blurhashSize'> {
   autoSizes?: boolean
   blurhash?: string
 }
 
-export function LazyImage({ autoSizes, blurhash, blurhashSize }: Props) {
+export function LazyImage({
+  autoSizes,
+  blurhash,
+  blurhashSize,
+  ...rest
+}: Props) {
   const target = useRef<HTMLImageElement | null>(null)
 
   useEffect(() => {
@@ -21,13 +28,14 @@ export function LazyImage({ autoSizes, blurhash, blurhashSize }: Props) {
         cleanup()
       }
     }
-  }, [])
+  }, [blurhash, blurhashSize])
 
   return (
     <img
       ref={target}
       data-sizes={autoSizes ? 'auto' : undefined}
       loading="lazy"
+      {...rest}
     />
   )
 }