@pixelfiddler/react 1.0.0 → 1.0.2

package/README.md

@@ -12,16 +12,16 @@ pnpm add @pixelfiddler/react
 yarn add @pixelfiddler/react
 ```
 
-**Note:** This package requires `react` >= 18.0.0 as a peer dependency.
+**Note:** This package requires `react` >= 18.2.0 as a peer dependency.
 
 ## Quick Start
 
 ```tsx
-import { PixelFiddleImage } from '@pixelfiddler/react';
+import { PixelFiddlerImage } from '@pixelfiddler/react';
 
 function App() {
   return (
-    <PixelFiddleImage
+    <PixelFiddlerImage
       src="https://example.com/photo.jpg"
       alt="A beautiful photo"
       width={800}
@@ -33,15 +33,15 @@ function App() {
 
 ## Components
 
-### `PixelFiddleImage`
+### `PixelFiddlerImage`
 
 A drop-in replacement for the `<img>` element that automatically generates optimized `srcSet` for responsive images.
 
 ```tsx
-import { PixelFiddleImage } from '@pixelfiddler/react';
+import { PixelFiddlerImage } from '@pixelfiddler/react';
 
 // Fixed-width image with DPR support (x descriptors)
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/photo.jpg"
   alt="Profile photo"
   width={400}
@@ -49,7 +49,7 @@ import { PixelFiddleImage } from '@pixelfiddler/react';
 // Generates: srcset="...?w=640 1x, ...?w=828 2x"
 
 // Fluid/responsive image (w descriptors)
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/photo.jpg"
   alt="Hero image"
   sizes="(max-width: 768px) 100vw, 50vw"
@@ -61,30 +61,30 @@ import { PixelFiddleImage } from '@pixelfiddler/react';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `src` | `string` | **required** | Base URL of the image |
+| `src` | `string` | **required** | URL of the image (relative or absolute). Relative paths are attached to `baseUrl` |
 | `alt` | `string` | - | Alt text (required for accessibility) |
+| `baseUrl` | `string` | - | Base URL endpoint from PixelFiddler Dashboard. Can be set via `PixelFiddlerProvider` or passed directly |
 | `width` | `number \| string` | - | Display width in CSS pixels. Generates DPR descriptors (`1x`, `2x`) |
-| `sizes` | `string` | - | Sizes attribute for responsive images. Generates width descriptors (`w`) |
+| `sizes` | `string` | - | Sizes attribute for responsive images. Generates width descriptors (`w`). Required if no fixed width is provided |
 | `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 |
+| `responsive` | `boolean` | `true` | Enable automatic srcSet generation. Ignored if `transformations.width` is set |
+| `deviceBreakpoints` | `number[]` | - | Custom device breakpoints for responsive srcset |
+| `imageBreakpoints` | `number[]` | - | Custom image breakpoints for smaller images |
 
 All standard `<img>` attributes (`className`, `loading`, `decoding`, etc.) are also supported.
 
 ### `PixelFiddlerProvider`
 
-A context provider for sharing configuration across all `PixelFiddleImage` components.
+A context provider for sharing configuration across all `PixelFiddlerImage` components.
 
 ```tsx
-import { PixelFiddlerProvider, PixelFiddleImage } from '@pixelfiddler/react';
+import { PixelFiddlerProvider, PixelFiddlerImage } 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} />
+      <PixelFiddlerImage src="/photos/hero.jpg" alt="Hero" sizes="100vw" />
+      <PixelFiddlerImage src="/photos/thumb.jpg" alt="Thumbnail" width={200} />
     </PixelFiddlerProvider>
   );
 }
@@ -94,7 +94,7 @@ function App() {
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `config` | `PixelFiddlerConfig` | Configuration object with `baseUrl` and optional `signatureKey` |
+| `config` | `PixelFiddlerConfig` | Configuration object with `baseUrl` and optional `maxDpr` |
 | `children` | `ReactNode` | Child components |
 
 ## Usage Examples
@@ -102,7 +102,7 @@ function App() {
 ### Basic Transformations
 
 ```tsx
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/photo.jpg"
   alt="Transformed image"
   responsive={false}
@@ -120,7 +120,7 @@ function App() {
 When you know the exact display size, use `width` to generate DPR variants:
 
 ```tsx
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/avatar.jpg"
   alt="User avatar"
   width={150}
@@ -136,7 +136,7 @@ When you know the exact display size, use `width` to generate DPR variants:
 For images that scale with the viewport, use `sizes`:
 
 ```tsx
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/hero.jpg"
   alt="Hero banner"
   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
@@ -148,7 +148,7 @@ For images that scale with the viewport, use `sizes`:
 ### Custom Breakpoints
 
 ```tsx
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/photo.jpg"
   alt="Custom breakpoints"
   sizes="100vw"
@@ -160,7 +160,7 @@ For images that scale with the viewport, use `sizes`:
 ### Disable Responsive Behavior
 
 ```tsx
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/photo.jpg"
   alt="Non-responsive"
   responsive={false}
@@ -172,7 +172,7 @@ For images that scale with the viewport, use `sizes`:
 ### With Standard Image Attributes
 
 ```tsx
-<PixelFiddleImage
+<PixelFiddlerImage
   src="https://example.com/photo.jpg"
   alt="Lazy loaded image"
   width={600}
@@ -199,14 +199,17 @@ Full TypeScript support with exported types:
 ```typescript
 import type {
   PixelFiddlerImageProps,
-  PixelFiddlerProviderProps,
-} from '@pixelfiddler/react';
-
-import type {
+  PixelFiddlerContextValue,
   TransformationOptions,
-  UrlBuilderConfig,
+  ResizeOptions,
+  FormatOptions,
+  EffectOptions,
+  CropOptions,
+  BorderOptions,
+  TextOptions,
+  WatermarkOptions,
   PixelFiddlerConfig,
-} from '@pixelfiddler/core';
+} from '@pixelfiddler/react';
 ```
 
 ## Related

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelfiddler/react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React components for PixelFiddler image transformation SDK",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -22,10 +22,10 @@
     "dist"
   ],
   "dependencies": {
-    "@pixelfiddler/core": "1.0.0"
+    "@pixelfiddler/core": "1.0.1"
   },
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": ">=18.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",