feat(components): blurhashSize prop

johannschopplich · Apr 20, 2023 · 8fe56cc · 8fe56cc
1 parent 32648a1
commit 8fe56cc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -13,7 +13,10 @@ export function LazyImage({ autoSizes, blurhash, blurhashSize }: Props) {
 
   useEffect(() => {
     if (target.current) {
-      const cleanup = lazyLoad(target.current, { blurhashSize })
+      const cleanup = lazyLoad(target.current, {
+        blurhash,
+        blurhashSize,
+      })
       return () => {
         cleanup()
       }
@@ -23,7 +26,6 @@ export function LazyImage({ autoSizes, blurhash, blurhashSize }: Props) {
   return (
     <img
       ref={target}
-      data-blurhash={blurhash}
       data-sizes={autoSizes ? 'auto' : undefined}
       loading="lazy"
     />

diff --git a/packages/react/src/react-env.d.ts b/packages/react/src/react-env.d.ts
diff --git a/packages/vue/src/components/LazyImage.vue b/packages/vue/src/components/LazyImage.vue
@@ -2,16 +2,20 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { lazyLoad } from 'unlazy'
 
-defineProps<{
-  blurhash?: string
+const props = defineProps<{
   autoSizes?: boolean
+  blurhash?: string
+  blurhashSize?: number
 }>()
 
 const target = ref<HTMLImageElement | undefined>()
 
 onMounted(() => {
   if (target.value) {
-    const cleanup = lazyLoad(target.value)
+    const cleanup = lazyLoad(target.value, {
+      blurhash: props.blurhash,
+      blurhashSize: props.blurhashSize,
+    })
     onBeforeUnmount(cleanup)
   }
 })
@@ -20,7 +24,6 @@ onMounted(() => {
 <template>
   <img
     ref="target"
-    :data-blurhash="blurhash"
     :data-sizes="autoSizes ? 'auto' : undefined"
     loading="lazy"
   >