sync

docs/unpic-react-provider.md

@@ -0,0 +1,60 @@
+# @unpic/react Provider
+
+`@unpic/react` интегрируется через base component и custom transformer из `@image-platform/client`.
+
+## Remote source mode
+
+Remote source mode принимает обычный image `src` из проекта или внешний URL и генерирует responsive `srcset` через Gateway:
+
+```text
+GET /p/{project}/remote/{preset}?src={sourceUrl}&w={width}&q={quality}&f=auto
+```
+
+## Usage
+
+```tsx
+import { Image } from "@unpic/react/base"
+import { imagePlatformUnpicTransformer } from "@image-platform/client"
+
+export function ProductImage() {
+  return (
+    <Image
+      alt="Product"
+      layout="constrained"
+      options={{
+        baseUrl: "https://img.example.com",
+        preset: "card",
+        project: "acme",
+        sourceBaseUrl: "https://site.example.com",
+      }}
+      src="/images/product.jpg"
+      transformer={imagePlatformUnpicTransformer}
+      width={640}
+      height={420}
+    />
+  )
+}
+```
+
+Если `src` относительный, `sourceBaseUrl` превращает его в абсолютный source URL. Если `src` уже абсолютный, он используется без изменений.
+
+## Breakpoints
+
+Static presets принимают только разрешённые widths. Для `card` это `320`, `640`, `960`, поэтому consumer должен передать compatible `breakpoints` или использовать Next/Unpic config, который не генерирует лишние widths.
+
+```tsx
+<Image
+  alt="Product"
+  breakpoints={[320, 640, 960]}
+  height={420}
+  layout="constrained"
+  options={{ baseUrl: "https://img.example.com", preset: "card", project: "acme", sourceBaseUrl: "https://site.example.com" }}
+  src="/images/product.jpg"
+  transformer={imagePlatformUnpicTransformer}
+  width={640}
+/>
+```
+
+## Auth
+
+Image delivery URL публичный и не использует `Authorization`. Management API tokens нужны только server-side для создания assets, versions и variants.