docs: add react integration

docs/.vitepress/config.ts

@@ -90,6 +90,7 @@ function nav(): DefaultTheme.NavItem[] {
           items: [
             { text: 'Vue', link: '/integrations/vue' },
             { text: 'Nuxt', link: '/integrations/nuxt' },
+            { text: 'React', link: '/integrations/react' },
           ],
         },
       ],
@@ -155,6 +156,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         { text: 'How To', link: '/integrations/' },
         { text: 'Vue', link: '/integrations/vue' },
         { text: 'Nuxt', link: '/integrations/nuxt' },
+        { text: 'React', link: '/integrations/react' },
       ],
     },
     {

docs/integrations/react.md

@@ -0,0 +1,69 @@
+# `@unlazy/react`
+
+unlazy is not only framework-agnostic, but also provides a React component that you can use in your React application.
+
+## Installation
+
+Install the `@unlazy/react` package using your favorite package manager:
+
+::: code-group
+  ```bash [pnpm]
+  pnpm add -D @unlazy/react
+  ```
+  ```bash [yarn]
+  yarn add -D @unlazy/react
+  ```
+  ```bash [npm]
+  npm install -D @unlazy/react
+  ```
+:::
+
+Import the `LazyImage` component in your component file:
+
+```tsx
+import { LazyImage } from '@unlazy/react'
+
+export default function MyComponent() {
+  return (
+    <LazyImage
+      src="data:image/svg+xml, ..."
+      data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+      auto-sizes
+    />
+  )
+}
+```
+
+## `LazyImage` Component
+
+The `LazyImage` component allows you to easily implement unlazy in your React application, providing a smoother image loading experience. The component supports automatic calculation of the `sizes` attribute with the `autoSizes` prop It also enables you to specify a `blurhash` for the blurry placeholder image.
+
+### Props
+
+The `LazyImage` component accepts the following props:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `autoSizes` | Boolean | A flag to indicate whether the sizes attribute should be automatically calculated. |
+| `blurhash` | String | A BlurHash string representing the blurry placeholder image. |
+| `blurhashSize` | Number | The size of the longer edge (width or height) of the decoded BlurHash image, depending on the aspect ratio. This value will be used to calculate the dimensions of the generated blurry placeholder from a Blurhash string. |
+
+## Examples
+
+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
+/>
+```

docs/integrations/vue.md

@@ -1,6 +1,6 @@
 # `@unlazy/vue`
 
-Since unlazy is framework-agnostic, integrating it into your Vue app is fairly easy.
+unlazy is not only framework-agnostic, but also provides a Vue component that you can use in your Vue application.
 
 ## Installation
 
@@ -28,7 +28,11 @@ import { LazyImage } from '@unlazy/vue/components'
 </script>
 
 <template>
-  <LazyImage data-srcset="image.jpg" blurhash="..." />
+  <LazyImage
+    src="data:image/svg+xml, ..."
+    data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+    auto-sizes
+  />
 </template>
 ```
 
@@ -49,16 +53,17 @@ app.mount('#app')
 
 ## `LazyImage` Component
 
-The `LazyImage` component allows you to easily implement unlazy in your Vue application, providing a smoother image loading experience. The component supports automatic calculation of the `sizes` attribute with the `autoSizes` prop and the usage of custom `sizes`. It also enables you to specify a `blurhash` for the blurry placeholder image.
+The `LazyImage` component allows you to easily implement unlazy in your Vue application, providing a smoother image loading experience. The component supports automatic calculation of the `sizes` attribute with the `autoSizes` prop. It also enables you to specify a `blurhash` for the blurry placeholder image.
 
 ### Props
 
 The `LazyImage` component accepts the following props:
 
 | Prop | Type | Description |
 | --- | --- | --- |
-| `blurhash` | String | A BlurHash string representing the blurry placeholder image. |
 | `autoSizes` | Boolean | A flag to indicate whether the sizes attribute should be automatically calculated. |
+| `blurhash` | String | A BlurHash string representing the blurry placeholder image. |
+| `blurhashSize` | Number | The size of the longer edge (width or height) of the decoded BlurHash image, depending on the aspect ratio. This value will be used to calculate the dimensions of the generated blurry placeholder from a Blurhash string. |
 
 ## Examples
 
@@ -68,14 +73,14 @@ In both examples, the `sizes` attribute is automatically calculated.
 <!-- BlurHash -->
 <LazyImage
   :blurhash="blurhash"
-  srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+  data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
   auto-sizes
 />
 
 <!-- Encoded image in `src` attribute -->
 <LazyImage
   src="data:image/svg+xml, ..."
-  srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+  data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
   auto-sizes
 />
 ```