@pixelfiddler/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PixelFiddler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,218 @@
+# @pixelfiddler/react
+
+React components for [PixelFiddler](https://pixel-fiddler.com) image transformations with automatic responsive image support.
+
+## Installation
+
+```bash
+npm install @pixelfiddler/react
+# or
+pnpm add @pixelfiddler/react
+# or
+yarn add @pixelfiddler/react
+```
+
+**Note:** This package requires `react` >= 18.0.0 as a peer dependency.
+
+## Quick Start
+
+```tsx
+import { PixelFiddleImage } from '@pixelfiddler/react';
+
+function App() {
+  return (
+    <PixelFiddleImage
+      src="https://example.com/photo.jpg"
+      alt="A beautiful photo"
+      width={800}
+      transformations={{ format: 'WEBP', quality: 80 }}
+    />
+  );
+}
+```
+
+## Components
+
+### `PixelFiddleImage`
+
+A drop-in replacement for the `<img>` element that automatically generates optimized `srcSet` for responsive images.
+
+```tsx
+import { PixelFiddleImage } from '@pixelfiddler/react';
+
+// Fixed-width image with DPR support (x descriptors)
+<PixelFiddleImage
+  src="https://example.com/photo.jpg"
+  alt="Profile photo"
+  width={400}
+/>
+// Generates: srcset="...?w=640 1x, ...?w=828 2x"
+
+// Fluid/responsive image (w descriptors)
+<PixelFiddleImage
+  src="https://example.com/photo.jpg"
+  alt="Hero image"
+  sizes="(max-width: 768px) 100vw, 50vw"
+/>
+// Generates: srcset="...?w=320 320w, ...?w=640 640w, ..."
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | **required** | Base URL of the image |
+| `alt` | `string` | - | Alt text (required for accessibility) |
+| `width` | `number \| string` | - | Display width in CSS pixels. Generates DPR descriptors (`1x`, `2x`) |
+| `sizes` | `string` | - | Sizes attribute for responsive images. Generates width descriptors (`w`) |
+| `transformations` | `TransformationOptions` | - | Image transformation options |
+| `responsive` | `boolean` | `true` | Enable automatic srcSet generation |
+| `deviceBreakpoints` | `number[]` | `[320, 375, 640, 768, 1024, 1280, 1536, 1920]` | Breakpoints for viewport-based sizing |
+| `imageBreakpoints` | `number[]` | `[16, 32, 48, 64, 96, 128, 256, 384]` | Breakpoints for smaller images |
+| `config` | `UrlBuilderConfig` | - | Override provider config for this image |
+
+All standard `<img>` attributes (`className`, `loading`, `decoding`, etc.) are also supported.
+
+### `PixelFiddlerProvider`
+
+A context provider for sharing configuration across all `PixelFiddleImage` components.
+
+```tsx
+import { PixelFiddlerProvider, PixelFiddleImage } from '@pixelfiddler/react';
+
+function App() {
+  return (
+    <PixelFiddlerProvider config={{ baseUrl: 'https://cdn.example.com' }}>
+      <PixelFiddleImage src="/photos/hero.jpg" alt="Hero" sizes="100vw" />
+      <PixelFiddleImage src="/photos/thumb.jpg" alt="Thumbnail" width={200} />
+    </PixelFiddlerProvider>
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `config` | `PixelFiddlerConfig` | Configuration object with `baseUrl` and optional `signatureKey` |
+| `children` | `ReactNode` | Child components |
+
+## Usage Examples
+
+### Basic Transformations
+
+```tsx
+<PixelFiddleImage
+  src="https://example.com/photo.jpg"
+  alt="Transformed image"
+  responsive={false}
+  transformations={{
+    width: 800,
+    height: 600,
+    format: 'WEBP',
+    quality: 85,
+  }}
+/>
+```
+
+### Responsive Image with Fixed Display Width
+
+When you know the exact display size, use `width` to generate DPR variants:
+
+```tsx
+<PixelFiddleImage
+  src="https://example.com/avatar.jpg"
+  alt="User avatar"
+  width={150}
+  transformations={{ format: 'WEBP' }}
+/>
+// Output:
+// src="...?w=384&f=WEBP"
+// srcset="...?w=384&f=WEBP 1x, ...?w=640&f=WEBP 2x"
+```
+
+### Responsive Image with Fluid Layout
+
+For images that scale with the viewport, use `sizes`:
+
+```tsx
+<PixelFiddleImage
+  src="https://example.com/hero.jpg"
+  alt="Hero banner"
+  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
+  transformations={{ format: 'WEBP', quality: 80 }}
+/>
+// Generates srcset with width descriptors (320w, 640w, 768w, etc.)
+```
+
+### Custom Breakpoints
+
+```tsx
+<PixelFiddleImage
+  src="https://example.com/photo.jpg"
+  alt="Custom breakpoints"
+  sizes="100vw"
+  deviceBreakpoints={[480, 768, 1024, 1440, 1920]}
+  imageBreakpoints={[]}
+/>
+```
+
+### Disable Responsive Behavior
+
+```tsx
+<PixelFiddleImage
+  src="https://example.com/photo.jpg"
+  alt="Non-responsive"
+  responsive={false}
+  transformations={{ width: 400, format: 'WEBP' }}
+/>
+// Output: just src, no srcset
+```
+
+### With Standard Image Attributes
+
+```tsx
+<PixelFiddleImage
+  src="https://example.com/photo.jpg"
+  alt="Lazy loaded image"
+  width={600}
+  className="rounded-lg shadow-md"
+  loading="lazy"
+  decoding="async"
+/>
+```
+
+## Responsive Strategy
+
+The component automatically chooses the appropriate srcSet strategy:
+
+| Input | Strategy | Descriptor | Use Case |
+|-------|----------|------------|----------|
+| `width` only | Fixed-size | `x` (1x, 2x) | Known display size, needs high-DPI support |
+| `sizes` only | Fluid | `w` (640w, 1200w) | Image size varies with viewport |
+| Neither | Fluid | `w` | Full-width responsive image (defaults to `sizes="100vw"`) |
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  PixelFiddlerImageProps,
+  PixelFiddlerProviderProps,
+} from '@pixelfiddler/react';
+
+import type {
+  TransformationOptions,
+  UrlBuilderConfig,
+  PixelFiddlerConfig,
+} from '@pixelfiddler/core';
+```
+
+## Related
+
+- [@pixelfiddler/core](https://www.npmjs.com/package/@pixelfiddler/core) - Core utilities for building transformation URLs
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var react = require('react');
+var core = require('@pixelfiddler/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/pixel-fiddler-image.tsx
+var PixelFiddlerContext = react.createContext(null);
+function PixelFiddlerProvider({ children, config }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PixelFiddlerContext.Provider, { value: { config }, children });
+}
+function PixelFiddlerImage({
+  src,
+  sizes,
+  width,
+  transformations,
+  baseUrl,
+  deviceBreakpoints,
+  imageBreakpoints,
+  responsive = true,
+  ...imgProps
+}) {
+  const context = react.useContext(PixelFiddlerContext);
+  const imageAttrs = react.useMemo(() => {
+    const finalBaseUrl = baseUrl || context?.config.baseUrl;
+    const hasWidthTransformation = transformations?.width;
+    if (responsive && !hasWidthTransformation) {
+      if (width && sizes) {
+        console.warn(
+          "[PixelFiddlerImage] Both `width` and `sizes` were provided. `sizes` will be ignored and a fixed-width DPR srcSet will be generated."
+        );
+      }
+      return core.createResponsiveAttributes(src, finalBaseUrl, {
+        width: width && +width,
+        sizes,
+        deviceBreakpoints,
+        imageBreakpoints,
+        transformations
+      });
+    }
+    return {
+      src: core.buildTransformationUrl({ src, baseUrl, transformations })
+    };
+  }, [src, sizes, transformations, deviceBreakpoints, imageBreakpoints, width, baseUrl, context?.config.baseUrl, responsive]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: imageAttrs.src || src,
+      srcSet: imageAttrs.srcSet,
+      sizes: imageAttrs.sizes,
+      width: imageAttrs.width || width,
+      ...imgProps
+    }
+  ) });
+}
+
+exports.PixelFiddlerImage = PixelFiddlerImage;
+exports.PixelFiddlerProvider = PixelFiddlerProvider;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/components/pixel-fiddler-image.tsx"],"names":["createContext","jsx","useContext","useMemo","createResponsiveAttributes","buildTransformationUrl","Fragment"],"mappings":";;;;;;;AAOO,IAAM,mBAAA,GAAsBA,oBAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACEC,cAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;ACyBO,SAAS,iBAAA,CAAkB;AAAA,EACI,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACP,CAAA,EAA2B;AAEzD,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAG9C,EAAA,MAAM,UAAA,GAAaC,cAAQ,MAAM;AAC7B,IAAA,MAAM,YAAA,GAAe,OAAA,IAAW,OAAA,EAAS,MAAA,CAAO,OAAA;AAEhD,IAAA,MAAM,yBAAyB,eAAA,EAAiB,KAAA;AAEhD,IAAA,IAAI,UAAA,IAAc,CAAC,sBAAA,EAAwB;AACvC,MAAA,IAAI,SAAS,KAAA,EAAO;AAChB,QAAA,OAAA,CAAQ,IAAA;AAAA,UACJ;AAAA,SAEJ;AAAA,MACJ;AAEA,MAAA,OAAOC,+BAAA,CAA2B,KAAK,YAAA,EAAc;AAAA,QACjD,KAAA,EAAO,SAAS,CAAC,KAAA;AAAA,QACjB,KAAA;AAAA,QACA,iBAAA;AAAA,QACA,gBAAA;AAAA,QACA;AAAA,OACH,CAAA;AAAA,IACL;AACA,IAAA,OAAO;AAAA,MACH,KAAKC,2BAAA,CAAuB,EAAC,GAAA,EAAK,OAAA,EAAS,iBAAgB;AAAA,KAC/D;AAAA,EAEJ,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,MAAA,CAAO,OAAA,EAAS,UAAU,CAAC,CAAA;AAE1H,EAAA,uBACIJ,cAAAA,CAAAK,mBAAA,EAAA,EACI,QAAA,kBAAAL,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,GAAA,EAAK,WAAW,GAAA,IAAO,GAAA;AAAA,MACvB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACR,EACJ,CAAA;AAER","file":"index.cjs","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n  config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n  children: ReactNode;\n  config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n  return (\n    <PixelFiddlerContext.Provider value={{config}}>\n      {children}\n    </PixelFiddlerContext.Provider>\n  );\n}\n","import { ImgHTMLAttributes, useContext, useMemo } from 'react';\r\nimport { buildTransformationUrl, createResponsiveAttributes, TransformationOptions, } from '@pixelfiddler/core';\r\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\r\n\r\nexport interface PixelFiddlerImageProps\r\n    extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {\r\n    /** Src to your image - can be both relative or absolute.\r\n     * If it's relative, it will be attached to baseUrl from config\r\n     * If it's absolute, it will be left as is\r\n     * */\r\n    src: string\r\n    /** This should be your baseURL endpoint for the source from PixelFiddle Dashboard. You can skip this property if\r\n     * you either pass it in PixelFiddlerProvider or pass an absolute path to src property.\r\n     *\r\n     * */\r\n    baseUrl?: string\r\n    /**\r\n     * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\r\n     * Required if no fixed width was provided, and you want the image to be responsive\r\n     */\r\n    sizes?: string;\r\n    /**\r\n     * Decides whether srcSet should be built automatically for responsive images. In case `width` is passed, this will result in srcSet with `x` (dpr) descriptor.\r\n     *\r\n     *\r\n     * If you want responsiveness based on layout, then you must pass `sizes` property for this to function properly e.g `(max-width: 768px) 100vw, 50vw\")`\r\n     * which will generate srcSet based on vw\r\n     *\r\n     *\r\n     * Ignored if `transformation.width` is set.\r\n     * @default true\r\n     */\r\n    responsive?: boolean\r\n    /**\r\n     * Display width in CSS pixels.\r\n     */\r\n    width?: number | `${number}`;\r\n    /** Transformation options to apply */\r\n    transformations?: TransformationOptions;\r\n    /** Custom device breakpoints for responsive srcset */\r\n    deviceBreakpoints?: number[];\r\n    /** Custom image breakpoints for smaller images */\r\n    imageBreakpoints?: number[];\r\n}\r\n\r\nexport function PixelFiddlerImage({\r\n                                      src,\r\n                                      sizes,\r\n                                      width,\r\n                                      transformations,\r\n                                      baseUrl,\r\n                                      deviceBreakpoints,\r\n                                      imageBreakpoints,\r\n                                      responsive = true,\r\n                                      ...imgProps\r\n                                  }: PixelFiddlerImageProps) {\r\n\r\n    const context = useContext(PixelFiddlerContext);\r\n\r\n\r\n    const imageAttrs = useMemo(() => {\r\n        const finalBaseUrl = baseUrl || context?.config.baseUrl\r\n\r\n        const hasWidthTransformation = transformations?.width\r\n\r\n        if (responsive && !hasWidthTransformation) {\r\n            if (width && sizes) {\r\n                console.warn(\r\n                    '[PixelFiddlerImage] Both `width` and `sizes` were provided. ' +\r\n                    '`sizes` will be ignored and a fixed-width DPR srcSet will be generated.'\r\n                );\r\n            }\r\n\r\n            return createResponsiveAttributes(src, finalBaseUrl, {\r\n                width: width && +width,\r\n                sizes,\r\n                deviceBreakpoints,\r\n                imageBreakpoints,\r\n                transformations\r\n            });\r\n        }\r\n        return {\r\n            src: buildTransformationUrl({src, baseUrl, transformations}),\r\n        };\r\n\r\n    }, [src, sizes, transformations, deviceBreakpoints, imageBreakpoints, width, baseUrl, context?.config.baseUrl, responsive]);\r\n\r\n    return (\r\n        <>\r\n            <img\r\n                src={imageAttrs.src || src}\r\n                srcSet={imageAttrs.srcSet}\r\n                sizes={imageAttrs.sizes}\r\n                width={imageAttrs.width || width}\r\n                {...imgProps}\r\n            />\r\n        </>\r\n    );\r\n}\r\n"]}

package/dist/index.d.cts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { TransformationOptions, PixelFiddlerConfig } from '@pixelfiddler/core';
+export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
+
+interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {
+    /** Src to your image - can be both relative or absolute.
+     * If it's relative, it will be attached to baseUrl from config
+     * If it's absolute, it will be left as is
+     * */
+    src: string;
+    /** This should be your baseURL endpoint for the source from PixelFiddle Dashboard. You can skip this property if
+     * you either pass it in PixelFiddlerProvider or pass an absolute path to src property.
+     *
+     * */
+    baseUrl?: string;
+    /**
+     * The sizes attribute for responsive images (e.g., "100vw", "(max-width: 768px) 100vw, 50vw").
+     * Required if no fixed width was provided, and you want the image to be responsive
+     */
+    sizes?: string;
+    /**
+     * Decides whether srcSet should be built automatically for responsive images. In case `width` is passed, this will result in srcSet with `x` (dpr) descriptor.
+     *
+     *
+     * If you want responsiveness based on layout, then you must pass `sizes` property for this to function properly e.g `(max-width: 768px) 100vw, 50vw")`
+     * which will generate srcSet based on vw
+     *
+     *
+     * Ignored if `transformation.width` is set.
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Display width in CSS pixels.
+     */
+    width?: number | `${number}`;
+    /** Transformation options to apply */
+    transformations?: TransformationOptions;
+    /** Custom device breakpoints for responsive srcset */
+    deviceBreakpoints?: number[];
+    /** Custom image breakpoints for smaller images */
+    imageBreakpoints?: number[];
+}
+declare function PixelFiddlerImage({ src, sizes, width, transformations, baseUrl, deviceBreakpoints, imageBreakpoints, responsive, ...imgProps }: PixelFiddlerImageProps): react_jsx_runtime.JSX.Element;
+
+interface PixelFiddlerContextValue {
+    config: PixelFiddlerConfig;
+}
+interface PixelFiddlerProviderProps {
+    children: ReactNode;
+    config: PixelFiddlerConfig;
+}
+declare function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type PixelFiddlerContextValue, PixelFiddlerImage, type PixelFiddlerImageProps, PixelFiddlerProvider };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { TransformationOptions, PixelFiddlerConfig } from '@pixelfiddler/core';
+export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
+
+interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {
+    /** Src to your image - can be both relative or absolute.
+     * If it's relative, it will be attached to baseUrl from config
+     * If it's absolute, it will be left as is
+     * */
+    src: string;
+    /** This should be your baseURL endpoint for the source from PixelFiddle Dashboard. You can skip this property if
+     * you either pass it in PixelFiddlerProvider or pass an absolute path to src property.
+     *
+     * */
+    baseUrl?: string;
+    /**
+     * The sizes attribute for responsive images (e.g., "100vw", "(max-width: 768px) 100vw, 50vw").
+     * Required if no fixed width was provided, and you want the image to be responsive
+     */
+    sizes?: string;
+    /**
+     * Decides whether srcSet should be built automatically for responsive images. In case `width` is passed, this will result in srcSet with `x` (dpr) descriptor.
+     *
+     *
+     * If you want responsiveness based on layout, then you must pass `sizes` property for this to function properly e.g `(max-width: 768px) 100vw, 50vw")`
+     * which will generate srcSet based on vw
+     *
+     *
+     * Ignored if `transformation.width` is set.
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Display width in CSS pixels.
+     */
+    width?: number | `${number}`;
+    /** Transformation options to apply */
+    transformations?: TransformationOptions;
+    /** Custom device breakpoints for responsive srcset */
+    deviceBreakpoints?: number[];
+    /** Custom image breakpoints for smaller images */
+    imageBreakpoints?: number[];
+}
+declare function PixelFiddlerImage({ src, sizes, width, transformations, baseUrl, deviceBreakpoints, imageBreakpoints, responsive, ...imgProps }: PixelFiddlerImageProps): react_jsx_runtime.JSX.Element;
+
+interface PixelFiddlerContextValue {
+    config: PixelFiddlerConfig;
+}
+interface PixelFiddlerProviderProps {
+    children: ReactNode;
+    config: PixelFiddlerConfig;
+}
+declare function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type PixelFiddlerContextValue, PixelFiddlerImage, type PixelFiddlerImageProps, PixelFiddlerProvider };

package/dist/index.js

@@ -0,0 +1,57 @@
+import { createContext, useContext, useMemo } from 'react';
+import { createResponsiveAttributes, buildTransformationUrl } from '@pixelfiddler/core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/pixel-fiddler-image.tsx
+var PixelFiddlerContext = createContext(null);
+function PixelFiddlerProvider({ children, config }) {
+  return /* @__PURE__ */ jsx(PixelFiddlerContext.Provider, { value: { config }, children });
+}
+function PixelFiddlerImage({
+  src,
+  sizes,
+  width,
+  transformations,
+  baseUrl,
+  deviceBreakpoints,
+  imageBreakpoints,
+  responsive = true,
+  ...imgProps
+}) {
+  const context = useContext(PixelFiddlerContext);
+  const imageAttrs = useMemo(() => {
+    const finalBaseUrl = baseUrl || context?.config.baseUrl;
+    const hasWidthTransformation = transformations?.width;
+    if (responsive && !hasWidthTransformation) {
+      if (width && sizes) {
+        console.warn(
+          "[PixelFiddlerImage] Both `width` and `sizes` were provided. `sizes` will be ignored and a fixed-width DPR srcSet will be generated."
+        );
+      }
+      return createResponsiveAttributes(src, finalBaseUrl, {
+        width: width && +width,
+        sizes,
+        deviceBreakpoints,
+        imageBreakpoints,
+        transformations
+      });
+    }
+    return {
+      src: buildTransformationUrl({ src, baseUrl, transformations })
+    };
+  }, [src, sizes, transformations, deviceBreakpoints, imageBreakpoints, width, baseUrl, context?.config.baseUrl, responsive]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: imageAttrs.src || src,
+      srcSet: imageAttrs.srcSet,
+      sizes: imageAttrs.sizes,
+      width: imageAttrs.width || width,
+      ...imgProps
+    }
+  ) });
+}
+
+export { PixelFiddlerImage, PixelFiddlerProvider };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/components/pixel-fiddler-image.tsx"],"names":["jsx"],"mappings":";;;;;AAOO,IAAM,mBAAA,GAAsB,cAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACE,GAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;ACyBO,SAAS,iBAAA,CAAkB;AAAA,EACI,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACP,CAAA,EAA2B;AAEzD,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAG9C,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAC7B,IAAA,MAAM,YAAA,GAAe,OAAA,IAAW,OAAA,EAAS,MAAA,CAAO,OAAA;AAEhD,IAAA,MAAM,yBAAyB,eAAA,EAAiB,KAAA;AAEhD,IAAA,IAAI,UAAA,IAAc,CAAC,sBAAA,EAAwB;AACvC,MAAA,IAAI,SAAS,KAAA,EAAO;AAChB,QAAA,OAAA,CAAQ,IAAA;AAAA,UACJ;AAAA,SAEJ;AAAA,MACJ;AAEA,MAAA,OAAO,0BAAA,CAA2B,KAAK,YAAA,EAAc;AAAA,QACjD,KAAA,EAAO,SAAS,CAAC,KAAA;AAAA,QACjB,KAAA;AAAA,QACA,iBAAA;AAAA,QACA,gBAAA;AAAA,QACA;AAAA,OACH,CAAA;AAAA,IACL;AACA,IAAA,OAAO;AAAA,MACH,KAAK,sBAAA,CAAuB,EAAC,GAAA,EAAK,OAAA,EAAS,iBAAgB;AAAA,KAC/D;AAAA,EAEJ,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,MAAA,CAAO,OAAA,EAAS,UAAU,CAAC,CAAA;AAE1H,EAAA,uBACIA,GAAAA,CAAA,QAAA,EAAA,EACI,QAAA,kBAAAA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,GAAA,EAAK,WAAW,GAAA,IAAO,GAAA;AAAA,MACvB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACR,EACJ,CAAA;AAER","file":"index.js","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n  config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n  children: ReactNode;\n  config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n  return (\n    <PixelFiddlerContext.Provider value={{config}}>\n      {children}\n    </PixelFiddlerContext.Provider>\n  );\n}\n","import { ImgHTMLAttributes, useContext, useMemo } from 'react';\r\nimport { buildTransformationUrl, createResponsiveAttributes, TransformationOptions, } from '@pixelfiddler/core';\r\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\r\n\r\nexport interface PixelFiddlerImageProps\r\n    extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {\r\n    /** Src to your image - can be both relative or absolute.\r\n     * If it's relative, it will be attached to baseUrl from config\r\n     * If it's absolute, it will be left as is\r\n     * */\r\n    src: string\r\n    /** This should be your baseURL endpoint for the source from PixelFiddle Dashboard. You can skip this property if\r\n     * you either pass it in PixelFiddlerProvider or pass an absolute path to src property.\r\n     *\r\n     * */\r\n    baseUrl?: string\r\n    /**\r\n     * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\r\n     * Required if no fixed width was provided, and you want the image to be responsive\r\n     */\r\n    sizes?: string;\r\n    /**\r\n     * Decides whether srcSet should be built automatically for responsive images. In case `width` is passed, this will result in srcSet with `x` (dpr) descriptor.\r\n     *\r\n     *\r\n     * If you want responsiveness based on layout, then you must pass `sizes` property for this to function properly e.g `(max-width: 768px) 100vw, 50vw\")`\r\n     * which will generate srcSet based on vw\r\n     *\r\n     *\r\n     * Ignored if `transformation.width` is set.\r\n     * @default true\r\n     */\r\n    responsive?: boolean\r\n    /**\r\n     * Display width in CSS pixels.\r\n     */\r\n    width?: number | `${number}`;\r\n    /** Transformation options to apply */\r\n    transformations?: TransformationOptions;\r\n    /** Custom device breakpoints for responsive srcset */\r\n    deviceBreakpoints?: number[];\r\n    /** Custom image breakpoints for smaller images */\r\n    imageBreakpoints?: number[];\r\n}\r\n\r\nexport function PixelFiddlerImage({\r\n                                      src,\r\n                                      sizes,\r\n                                      width,\r\n                                      transformations,\r\n                                      baseUrl,\r\n                                      deviceBreakpoints,\r\n                                      imageBreakpoints,\r\n                                      responsive = true,\r\n                                      ...imgProps\r\n                                  }: PixelFiddlerImageProps) {\r\n\r\n    const context = useContext(PixelFiddlerContext);\r\n\r\n\r\n    const imageAttrs = useMemo(() => {\r\n        const finalBaseUrl = baseUrl || context?.config.baseUrl\r\n\r\n        const hasWidthTransformation = transformations?.width\r\n\r\n        if (responsive && !hasWidthTransformation) {\r\n            if (width && sizes) {\r\n                console.warn(\r\n                    '[PixelFiddlerImage] Both `width` and `sizes` were provided. ' +\r\n                    '`sizes` will be ignored and a fixed-width DPR srcSet will be generated.'\r\n                );\r\n            }\r\n\r\n            return createResponsiveAttributes(src, finalBaseUrl, {\r\n                width: width && +width,\r\n                sizes,\r\n                deviceBreakpoints,\r\n                imageBreakpoints,\r\n                transformations\r\n            });\r\n        }\r\n        return {\r\n            src: buildTransformationUrl({src, baseUrl, transformations}),\r\n        };\r\n\r\n    }, [src, sizes, transformations, deviceBreakpoints, imageBreakpoints, width, baseUrl, context?.config.baseUrl, responsive]);\r\n\r\n    return (\r\n        <>\r\n            <img\r\n                src={imageAttrs.src || src}\r\n                srcSet={imageAttrs.srcSet}\r\n                sizes={imageAttrs.sizes}\r\n                width={imageAttrs.width || width}\r\n                {...imgProps}\r\n            />\r\n        </>\r\n    );\r\n}\r\n"]}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@pixelfiddler/react",
+  "version": "1.0.0",
+  "description": "React components for PixelFiddler image transformation SDK",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pixelfiddler/core": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.2.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^27.4.0",
+    "react": "^18.3.1",
+    "react-dom": "18",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "pixelfiddler",
+    "react",
+    "image",
+    "transformation",
+    "cdn",
+    "optimization",
+    "component"
+  ],
+  "license": "MIT",
+  "author": "PixelFiddler",
+  "homepage": "https://pixel-fiddler.com",
+  "bugs": {
+    "url": "https://github.com/pixel-fiddler/js-sdk/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pixel-fiddler/js-sdk.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist coverage"
+  }
+}