{"_id":"@danilo.riedel/img-fit-next","_rev":"4-e2aeae17126578fc0d5a200d13f3223e","name":"@danilo.riedel/img-fit-next","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.7":{"name":"@danilo.riedel/img-fit-next","version":"0.1.7","keywords":["img-fit","img-fwd","next","nextjs","image","responsive","optimization"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit-next@0.1.7","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"566ee77e5ffc9bdb94e6da8e7c6a9ec21730dacd","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-next/-/img-fit-next-0.1.7.tgz","fileCount":4,"integrity":"sha512-jD8YWvQ6bz+LPx36AJOOvqGZmkAnhw/ZG+LRIfjnzsklAZJVSuJxFBc41NtXNLIvNOost7hQ5LGrFVuNzz+26g==","signatures":[{"sig":"MEUCIG47QQqaKvklel79noVhu4PIuDf4XxHY8yPZZ3otOgFVAiEAppwoewEgl+Cv2V5Rbk012hZvQwYzrqLi84yA0BvgRfA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-next@0.1.7","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":4058},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","require":"./src/index.js"}},"gitHead":"804e6b1d13802b0ccb89e7c37277888bf2fcc42f","scripts":{"test":"node --test test/*.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/next"},"_npmVersion":"10.8.2","description":"Next.js adapter for img-fit — automatic width-aware images for img-fwd.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@danilo.riedel/img-fit":"^0.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"^14.2.35","jsdom":"^24.1.3","react":"^18.3.1","react-dom":"^18.3.1","@testing-library/react":"^15.0.7"},"peerDependencies":{"next":">=12.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fit-next_0.1.7_1781571267794_0.6884064688034324","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@danilo.riedel/img-fit-next","version":"0.2.0","keywords":["img-fit","img-fwd","next","nextjs","image","responsive","optimization"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit-next@0.2.0","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"17528c7e29416fab495370aaa6985494a2783d79","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-next/-/img-fit-next-0.2.0.tgz","fileCount":4,"integrity":"sha512-74fGsdZHrFIsVV2l+8fWtaNAZrChkU4utYTfjEGWFLWhYq5YlM8fueuneglUMaTEVXy1ZEixuXST+OiVrat10w==","signatures":[{"sig":"MEYCIQCXIL9yh/vf607U5TBeEGBsr7hgrbFGDfdWRzSCWwmzwAIhAOrRVqO9ymDpUtzb4z7l4Aj0uLgzSMaDJ1wUZVx4x/za","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-next@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":5598},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","require":"./src/index.js"}},"gitHead":"63d709c7db5b76788e6c2863160e7927b1ad4e60","scripts":{"test":"node --test test/*.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/next"},"_npmVersion":"10.8.2","description":"Next.js adapter for img-fit — automatic width-aware images for img-fwd.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@danilo.riedel/img-fit":"^0.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"^14.2.35","jsdom":"^24.1.3","react":"^18.3.1","react-dom":"^18.3.1","@testing-library/react":"^15.0.7"},"peerDependencies":{"next":">=12.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fit-next_0.2.0_1781575318861_0.7074162388832801","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@danilo.riedel/img-fit-next","version":"0.2.1","keywords":["img-fit","img-fwd","next","nextjs","image","responsive","optimization"],"author":{"name":"Danilo Riedel"},"license":"MIT","_id":"@danilo.riedel/img-fit-next@0.2.1","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"homepage":"https://github.com/driedel/img-fit#readme","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"dist":{"shasum":"13176fc3547be7506e2da8350c6a00e593dd690c","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-next/-/img-fit-next-0.2.1.tgz","fileCount":4,"integrity":"sha512-69ii6W+ULO1oTGjHlZRbg9XQ8PFWpCdUA7G7GWH6CcUgCXp7ibKFFEj+5lsUa6/9bTJoZRSBEJt1md+5GlGaVw==","signatures":[{"sig":"MEUCIQCHaU1Q5XIB/dBXN2yhlJ1gJ6PeRwZy5oD9NP+3oiAUfQIgXHsYbbNh4wym1fFRcWZh/3+UjYUmOwZGKwtbsdJCVfY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-next@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":7035},"main":"./src/index.js","type":"module","types":"./src/index.d.ts","module":"./src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js","require":"./src/index.js"}},"gitHead":"42c3480c0fe7acb58eb26d35bfd6a5295a247af2","scripts":{"test":"node --test test/*.test.js"},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"repository":{"url":"git+https://github.com/driedel/img-fit.git","type":"git","directory":"packages/next"},"_npmVersion":"10.8.2","description":"Next.js adapter for img-fit — automatic width-aware images for img-fwd.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@danilo.riedel/img-fit":"^0.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"^14.2.35","jsdom":"^24.1.3","react":"^18.3.1","react-dom":"^18.3.1","@testing-library/react":"^15.0.7"},"peerDependencies":{"next":">=12.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fit-next_0.2.1_1781630128514_0.44242241300218965","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@danilo.riedel/img-fit-next","version":"0.2.2","description":"Next.js adapter for img-fit — automatic width-aware images for img-fwd.","main":"./src/index.js","module":"./src/index.js","types":"./src/index.d.ts","type":"module","exports":{".":{"import":"./src/index.js","require":"./src/index.js","types":"./src/index.d.ts"}},"scripts":{"test":"node --test test/*.test.js"},"devDependencies":{"@testing-library/react":"^15.0.7","jsdom":"^24.1.3","next":"^16.3.5","react":"^18.3.1","react-dom":"^18.3.1"},"keywords":["img-fit","img-fwd","next","nextjs","image","responsive","optimization"],"author":{"name":"Danilo Riedel"},"license":"MIT","peerDependencies":{"next":">=12.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"repository":{"type":"git","url":"git+https://github.com/driedel/img-fit.git","directory":"packages/next"},"publishConfig":{"access":"public"},"dependencies":{"@danilo.riedel/img-fit":"^0.2.1"},"_id":"@danilo.riedel/img-fit-next@0.2.2","gitHead":"ce350d3b286e4c54b1865e76b43bdf3cd2556798","bugs":{"url":"https://github.com/driedel/img-fit/issues"},"homepage":"https://github.com/driedel/img-fit#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-ryK5I0FdbJhl+YumWI5tP92nFhQrsKP3P/79wtF2oAT6K3BlZO2wJ9MLIryGzKm8Tj4sC+OTni73VRpxZbu49w==","shasum":"f0fd3e95613d6e108698cff6bab4656cb84573b1","tarball":"https://registry.npmjs.org/@danilo.riedel/img-fit-next/-/img-fit-next-0.2.2.tgz","fileCount":4,"unpackedSize":7083,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danilo.riedel%2fimg-fit-next@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEOK0PmjHJaNen88AaK99OmeMq7wFehkOW5p2vR/wopGAiAiJedYcKdZiION90HKu+1jZylNZeB21UI9A+sIj469Nw=="}]},"_npmUser":{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"},"directories":{},"maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/img-fit-next_0.2.2_1789390962391_0.12238220878077355"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-16T00:54:27.620Z","modified":"2026-09-14T13:02:42.909Z","0.1.7":"2026-06-16T00:54:27.952Z","0.2.0":"2026-06-16T02:01:58.996Z","0.2.1":"2026-06-16T17:15:28.651Z","0.2.2":"2026-09-14T13:02:42.521Z"},"bugs":{"url":"https://github.com/driedel/img-fit/issues"},"author":{"name":"Danilo Riedel"},"license":"MIT","homepage":"https://github.com/driedel/img-fit#readme","keywords":["img-fit","img-fwd","next","nextjs","image","responsive","optimization"],"repository":{"type":"git","url":"git+https://github.com/driedel/img-fit.git","directory":"packages/next"},"description":"Next.js adapter for img-fit — automatic width-aware images for img-fwd.","maintainers":[{"name":"danilo.riedel","email":"danilo.riedel@gmail.com"}],"readme":"# @danilo.riedel/img-fit-next\n\nNext.js adapter for [img-fit](https://github.com/driedel/img-fit).\n\n## Installation\n\n```bash\nnpm install @danilo.riedel/img-fit-next\n```\n\nRequires Next.js 12 or later (peer dependency).\n\n## Usage\n\n```jsx\nimport { ImgFitImage } from '@danilo.riedel/img-fit-next';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n> **Note:** When using the `fill` prop, the parent element must have `position: relative` and explicit dimensions (width + height or aspect-ratio). img-fit measures the parent to compute `?rs=`.\n\n## Props\n\n| Prop | Type | Description |\n|---|---|---|\n| `src` | `string` | Original image URL. |\n| `alt` | `string` | Image alt text. |\n| `params` | `string` | Extra img-fwd parameters, e.g. `f=webp&q=80`. |\n| `options` | `object` | Options passed to img-fit. See table below. |\n\nAll other props are forwarded to `next/image`.\n\n## Options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `dpr` | `boolean` | `true` | Multiply the measured width by `window.devicePixelRatio`. |\n| `observeResize` | `boolean` | `true` | Update the image when the container resizes. |\n| `resizeDebounceMs` | `number` | `100` | Debounce delay (ms) for resize updates. |\n| `lazy` | `boolean` | `true` | Recompute via `IntersectionObserver` for `loading=\"lazy\"` images. |\n\nAll options from the core package are accepted. See [@danilo.riedel/img-fit](https://www.npmjs.com/package/@danilo.riedel/img-fit) for the full list.\n\n## Retina / DPR\n\nBy default the component multiplies the measured container width by `window.devicePixelRatio` before snapping to a breakpoint. A 560 px container on a 2× Retina display generates `?rs=1250` instead of `?rs=600`, keeping images crisp on every screen.\n\nTo request CSS pixel widths only:\n\n```jsx\n\n```\n\n## Extra parameters\n\nAppend extra [img-fwd](https://img-fwd.driedel.dev/) transform parameters via the `params` prop. They are inserted before `?rs=` in the final URL:\n\n```jsx\n// Result: https://cdn.example.com/photo.jpg?f=webp&q=80&rs=1250\n\n```\n\n## Notes\n\n- The component renders the original `src` during SSR and hydration.\n- The optimized `?rs=` URL is applied on the client after the container is measured via `useEffect`.\n- When using `fill`, the parent element must have explicit dimensions so the adapter can compute `?rs=` correctly.\n- Lazy images are recomputed via `IntersectionObserver` before they load.\n","readmeFilename":"README.md"}