@lambdaimg/react 0.1.0

package/README.md

@@ -0,0 +1,28 @@
+# @lambdaimg/react
+
+A tiny React component for LambdaImg. It renders one plain `<img>` with generated `srcSet` values.
+
+```tsx
+import { Image } from "@lambdaimg/react";
+
+<Image
+  baseUrl="https://images.example.com"
+  src="products/chair.jpeg"
+  width={640}
+  height={480}
+  alt="Walnut chair"
+/>;
+```
+
+Use `priority` for above-the-fold images:
+
+```tsx
+<Image
+  priority
+  baseUrl="https://images.example.com"
+  src="hero.jpeg"
+  width={1440}
+  height={810}
+  alt="Showroom"
+/>
+```

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { type ImageWidth } from "@lambdaimg/core";
+import type * as React from "react";
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" | "src" | "srcSet" | "sizes" | "loading" | "decoding"> {
+    alt: string;
+    src: string;
+    baseUrl?: string;
+    widths?: readonly ImageWidth[];
+    sizes?: string;
+    priority?: boolean;
+    loading?: "eager" | "lazy";
+    decoding?: "async" | "auto" | "sync";
+}
+export declare function Image({ alt, src, baseUrl, widths, sizes, priority, loading, decoding, ...props }: ImageProps): React.JSX.Element;
+export type { ImageWidth };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EACzC,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC5D;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACtC;AAED,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,GAAG,EACH,OAAO,EACP,MAA6B,EAC7B,KAAe,EACf,QAAgB,EAChB,OAAO,EACP,QAAkB,EAClB,GAAG,KAAK,EACT,EAAE,UAAU,qBAgBZ;AAED,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ALLOWED_IMAGE_WIDTHS, buildOriginalUrl, buildSrcSet, } from "@lambdaimg/core";
+export function Image({ alt, src, baseUrl, widths = ALLOWED_IMAGE_WIDTHS, sizes = "100vw", priority = false, loading, decoding = "async", ...props }) {
+    const resolvedLoading = loading ?? (priority ? "eager" : "lazy");
+    const fetchPriority = priority ? "high" : props.fetchPriority;
+    return (_jsx("img", { ...props, alt: alt, src: buildOriginalUrl(src, { baseUrl }), srcSet: buildSrcSet(src, { baseUrl, widths }), sizes: sizes, loading: resolvedLoading, decoding: decoding, fetchPriority: fetchPriority }));
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,GAEZ,MAAM,iBAAiB,CAAC;AAiBzB,MAAM,UAAU,KAAK,CAAC,EACpB,GAAG,EACH,GAAG,EACH,OAAO,EACP,MAAM,GAAG,oBAAoB,EAC7B,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,GAAG,OAAO,EAClB,GAAG,KAAK,EACG;IACX,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC;IAE9D,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,gBAAgB,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,EACvC,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAC7C,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@lambdaimg/react",
+  "version": "0.1.0",
+  "description": "React image component for LambdaImg.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jperezrealini/lambdaimg.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "check": "oxlint && oxfmt --check && tsc --noEmit -p tsconfig.json",
+    "fix": "oxlint --fix && oxfmt",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@lambdaimg/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/bun": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  }
+}