{"_id":"@biggleszx/react-sanity-image","_rev":"8-4d554086c01493ad0d24dc20f83f1c9b","name":"@biggleszx/react-sanity-image","dist-tags":{"latest":"1.0.1"},"versions":{"0.1.0":{"name":"@biggleszx/react-sanity-image","version":"0.1.0","keywords":["sanity","react","image","picture"],"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","_id":"@biggleszx/react-sanity-image@0.1.0","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"dist":{"shasum":"ac6c335d4a675c1739e0fe5166cdff6b4b659414","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-0.1.0.tgz","fileCount":12,"integrity":"sha512-POuufEcK4zWm2XP4Ays6Hm4qWUC5y32YV3Cjgr+oE0sy+k865TMUzP0OGRjopss7Khbo1GByVeaUs8vZvbOY7w==","signatures":[{"sig":"MEQCIGBJk1zyPQ3igfQ01oHuB11R4uWmEZHG2v6m9ggjBRoSAiA2aHz3Vj9Poth47xt7RYHxISdLvlKxLDQCN103Z7VzWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5rtPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+4g//cku4cryDeFethlwNtj/tu0eXm0K3wb5IBJdnZBvYyHfO+Dim\r\nJiqX9akU1iIGvFLQJT4Vz9WXmTKqBzUUbtFmPdW/wAJafgMogBImwL7OMql+\r\nwcHF7wJdxF+ffMlCs2j4yl61uWSp8gAlbjvQNj/tqE/z/3VJHWZc10q2MM51\r\nqx6dId7ziff/0M8mIysoTwx5LKgtf2zLkNmbXcIpg5IyLI9OuTqoIrbKIgDB\r\nSZrsOqC4PLTNTiS65sGsVAlYUS6Iz2sBij7DIq3mdqUi21+6v8wKIiVgYf9c\r\nNNUdYDQehrZtnX7KDYVi0803xPZX5ykz7iMuYFdHTWekeniYrW+tCcW5JDAH\r\nsobQioqolO3LiRm9CcYjTtkVigMgaRQ5JXwH3c7L8GN9Rwk15GuMkBU4mtDY\r\ntC05QNVGEqf9b89+KExt9tyx4buPWGoBXlE3D40wb9a1Mc7A7JVZRc2oDjAT\r\nBv4nhBPWLKWOxy1n2o0zNpC54MEe07+7gV4j0zQO8TrvXtBNgxGNHriiSF63\r\nst1HxdNDxCb5Tvs8aQ+Z7WEkZsNf/j08NFjyGAd12NNri87vZUpE0mlohCYZ\r\ntdPyDdwd66RUiLPK+Rk+hZpaKXOJ4OL0zCrkfLRLzXTg+a39HLcUeFkHrJct\r\n7n8DeQpAh5RayCCALdq8G3b7PUBxo0u8E8k=\r\n=ZDoE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","engines":{"node":">=16.15.0"},"gitHead":"aa49ff452b332411893e136745aaf71609f6dcb6","scripts":{"lint":"eslint --ext .ts,.tsx src","build":"rm -rf dist/* ; rollup --config","storybook":"start-storybook -p 6006","prepublishOnly":"npm run build"},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"repository":{"url":"git+https://github.com/BigglesZX/react-sanity-image.git","type":"git"},"_npmVersion":"8.5.5","description":"Simple React components for presenting images from Sanity","directories":{},"_nodeVersion":"16.15.0","dependencies":{"@sanity/image-url":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","tslib":"^2.4.0","eslint":"^8.20.0","rollup":"^2.77.2","ts-node":"^10.9.1","react-dom":"^18.2.0","typescript":"^4.7.4","@types/node":"^18.6.3","@types/react":"^18.0.15","@sanity/client":"^3.3.2","@storybook/react":"^6.5.9","@types/react-dom":"^18.0.6","eslint-plugin-react":"^7.30.1","eslint-plugin-compat":"^4.0.2","eslint-plugin-storybook":"^0.6.1","@rollup/plugin-typescript":"^8.3.4","@typescript-eslint/parser":"^5.31.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^6.5.9","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":"^18.2.0","@sanity/client":"^3.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-sanity-image_0.1.0_1659288398866_0.43804788733968514","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@biggleszx/react-sanity-image","version":"0.1.1","keywords":["sanity","react","image","picture"],"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","_id":"@biggleszx/react-sanity-image@0.1.1","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"dist":{"shasum":"ea4d5e8a211b9d9c8cf684f835e9c1c939f27a26","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-0.1.1.tgz","fileCount":12,"integrity":"sha512-OZX1hWmRjyXpFBCRJxHhIihGBdyTosHIKogiGWTRCUXHO8F3BTKwcwY692PUlWeUnf+Xaqd8YbyQsCCHf1ItGg==","signatures":[{"sig":"MEUCICH5TWffhQeNivZ8do+aPmmgLQW7ZJrIQwW+7CH71g4QAiEA+bVUq0phPPmi8rTCb/4tNkEMWeiteXkCnTK9VrFd3Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5tw1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreiBAAo7sz6IxhYpL+dUqhKOrwNk5vrG63lHvU25tVbD0L4yVjoTqh\r\nSU3OmKhDcQiQH4o/BXPeaKGt6H99FCKf6ii9wRlbNqeakr4SqzPwqTITftER\r\nIvYENEjgTOFRHz38NqidWI0FA2M2lYXzatfAIwgXzTEhw1A5hm73QLbeJmy+\r\nlI85IzLN1ueJkUKy6rqyVycmW0IgBIa/6AAxjVvM+AAFb5FahIour0bOL5K/\r\nYvtTJfujE9dVbnrvTLQSuAlvsev5S0LpxlwLK7HjMC+FWf3BzVVyK5hJnu+g\r\n1Q3p9wwGOf0cj3E0wiyxlAJrzR7X15QXsLWYGnPFZ8rbZ6uRUlP4cjFaKiJB\r\ngxcajjPNWNHN/1EHVamTJHIqoAbM0LdooFHPyDKHj8aIbCdXLHeksg0cUCRV\r\nWhmK1Jpvj/moz6e/NiKhJxwS1bDsqaD6JqPz0fV/bfb3gZC9l+UBjpkVYaTP\r\n24H1jCu5D4K1BtvparQ67Z1/4c0q2Zr7IwDP2+sjyniEJRzqHFVe9JPmFWAt\r\ntiKMmBblqXl0sRXvpk+Z9LDz0BqGNSsGav+bx5hrlFDYY3tRKCnO3QHjCvR9\r\n9PqhBua6jYvT3hsa8WyY+8AfZcIWFtewzK0TTDU3+bvzOUq8dOtvpJdS49+W\r\nsy+E4K1tUWbeWpapiqYAIKktZUMWG5cJzEY=\r\n=W0X1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","engines":{"node":">=16.15.0"},"gitHead":"d525051ab46e3c7af6f5a27a35488308881ec541","scripts":{"lint":"eslint --ext .ts,.tsx src","build":"rm -rf dist/* ; rollup --config","storybook":"start-storybook -p 6006","prepublishOnly":"npm run build"},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"repository":{"url":"git+https://github.com/BigglesZX/react-sanity-image.git","type":"git"},"_npmVersion":"8.5.5","description":"Simple React components for presenting images from Sanity","directories":{},"_nodeVersion":"16.15.0","dependencies":{"@sanity/image-url":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","tslib":"^2.4.0","eslint":"^8.20.0","rollup":"^2.77.2","ts-node":"^10.9.1","react-dom":"^18.2.0","typescript":"^4.7.4","@types/node":"^18.6.3","@types/react":"^18.0.15","@sanity/client":"^3.3.2","@storybook/react":"^6.5.9","@types/react-dom":"^18.0.6","eslint-plugin-react":"^7.30.1","eslint-plugin-compat":"^4.0.2","eslint-plugin-storybook":"^0.6.1","@rollup/plugin-typescript":"^8.3.4","@typescript-eslint/parser":"^5.31.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^6.5.9","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":"^18.2.0","@sanity/client":"^3.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-sanity-image_0.1.1_1659296821198_0.6926240821601688","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@biggleszx/react-sanity-image","version":"0.1.2","keywords":["sanity","react","image","picture"],"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","_id":"@biggleszx/react-sanity-image@0.1.2","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"dist":{"shasum":"b6c44864a796a2afd70c4d9277e5d115fa819f86","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-0.1.2.tgz","fileCount":12,"integrity":"sha512-RT8HCDTrZx8RSZGIEYowvXMOpjx6CBpwwUDqn32JIjZsHhEOH0rtgybzYiMQHTC//M5jcoR+0/lkVk3aybxtNg==","signatures":[{"sig":"MEYCIQC86PfZ1R2JU29Ug2FLcea6zEVvhszntoaMwNjTrCA52wIhAN3o48baDTjsPdWDKwxBydWDobaW1lgdRwWi7yb48apt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6ko7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkKw//epq+ZEvkhtoNys4cCO4FU6tjR78p95QFDo7tFhElhLTlF+TS\r\nDns7oHt3/MSqme0GeDTxg+m36Bs4hjfZV2+5EUcw6AqiaZa81lherC7W5REa\r\nXYwdwwniEw5deHVHhnblIAQ7mPkROQYC/vqLUXWAGgLqF3GxO4s2Aive86UA\r\n0ASvc1CxACbWmWj4eKG7LOoILClRIFESoKkFJDeK6VW73d3M358RmHai7a1D\r\nbJR9jnOmxJNh19HZGT7mBFVW26ZN399iND629OKGxQj1BVKH+d1QLyk9hBl5\r\nwxZ/Lv6ZSNPxECf0SEe62YcbCGr5IwKGmYvSJgHxrrzJU0/B42ut2borXCJQ\r\nChBpYdpZT60kuH0+oojBRAbuTP89liWUZI/6UPNtvzHlJQXsr+oAQxduQeXM\r\nhMdkvoLzeUZVzvRIZs/ZfrBypfzZAeYG2kmRXOCGtdUo0eqs6Qjp0XNyRVUz\r\noTm2R9WN5SVqIl0noYB/NB3VK7CXCKI9XrYzg7HudDgs6wwukJKrom6I9hYk\r\nG+fapuQ+U+qfbiID90a2n5eZnf9XwrDpmHTaFXgWrUpZCppsL/UnDj+ytnvg\r\nTzLQDNk3vxwNRr6YZrq7VDJkA2jFoUL9nw0SFrNcXth95Q3Fda1KY7Mro8Ol\r\n+dLl6DV7F0TpIBaY8jR40mLrXRazBQT4xiM=\r\n=0Dnj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","engines":{"node":">=16.15.0"},"gitHead":"9b65974e9f6ca7a18dab516ea7277572e64fc0b2","scripts":{"lint":"eslint --ext .ts,.tsx src","build":"rm -rf dist/* ; rollup --config","storybook":"start-storybook -p 6006","prepublishOnly":"npm run build"},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"repository":{"url":"git+https://github.com/BigglesZX/react-sanity-image.git","type":"git"},"_npmVersion":"8.5.5","description":"Simple React components for presenting images from Sanity","directories":{},"_nodeVersion":"16.15.0","dependencies":{"@sanity/image-url":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","tslib":"^2.4.0","eslint":"^8.20.0","rollup":"^2.77.2","ts-node":"^10.9.1","react-dom":"^18.2.0","typescript":"^4.7.4","@types/node":"^18.6.3","@types/react":"^18.0.15","@sanity/client":"^3.3.2","@storybook/react":"^6.5.9","@types/react-dom":"^18.0.6","eslint-plugin-react":"^7.30.1","eslint-plugin-compat":"^4.0.2","eslint-plugin-storybook":"^0.6.1","@rollup/plugin-typescript":"^8.3.4","@typescript-eslint/parser":"^5.31.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^6.5.9","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":"^18.2.0","@sanity/client":"^3.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-sanity-image_0.1.2_1659521594870_0.4730533269581274","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"@biggleszx/react-sanity-image","version":"0.1.3","keywords":["sanity","react","image","picture"],"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","_id":"@biggleszx/react-sanity-image@0.1.3","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"dist":{"shasum":"0aed0339a2096cd48b825007a55161d2a785796b","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-0.1.3.tgz","fileCount":12,"integrity":"sha512-peJKAhy9SDasoFhUFAzkykstqDeUlDh/fn70PdLxy2pkJZ4dCRkBx5B1abFJtHpoIrpDrScVBXFW3+RvCKoFrg==","signatures":[{"sig":"MEUCIGQdfPKnZ9zEVTbNflOkBFcqOCPIsv+nIIszjQ3GOZgaAiEAkaEmHV47jRey94hgfHImXxsoIF+/jSQV2E9uu3Aesj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKYjkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/DhAAoDHEJrDRKiQYvcFDAoBpAW0XAOecR08p7UCbd0u/Y7mMHSw0\r\nPvJTW7zewL7gwMyQmZoj51GQ/eE7+XdCUHnyTX5vxteUhP8fDp11zrI9FCcI\r\n+/EDPTywr31vMGmv+hzR6Na0YqMcgDL/TeWNiEyrX1E93LlgF8+W06d9tvef\r\nyNtl90UY+ChKjXLjRYFGx2iLmwJ/Ne90R5wnaO0ITNeOnpUF97TRtjTj7S2q\r\nkYp1D9tKgvwgMHy4BD9XLdM9bRz+U0TBX8UKiPe2lwBgbVp53F0IHkom9jF7\r\nnd0/ohFOvyzHpfxL5kVaOkuDIJfpCNNanh7uGy3d93R8TQUNgueT1kSWpr0d\r\npddqvsffgbQI2CaQJT7Vi0CYEwUGssUVWC4PiGUncMkdixvRadsZKwr1N+Wl\r\nvmPxWdX6j+gpcc+/i8Xl8HcQur4ChxqA7hG44YPEjqnKuXr82OrllPuiUuwj\r\n9bar2SMKNC6S2UVIVdJ8TWfWhLIyYWMHIkDMU3dOUwL20cWHDQd6XRfUTMTu\r\n7OdIiZ/3Xls1zriXCOWLToS7F/gCV1DTdYieT0wK0DyV32IaWA2XccFN9V0g\r\nNuKk851oEXfmlNqdJk1O8Avgodzj7VIkyvNs9iGK91cM+HOHEUA+aRpRwwQ1\r\n4aDStuztjGRRMdaCP7yl6UnfvO1CJa+2nMI=\r\n=ODu8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","engines":{"node":">=16.15.0"},"gitHead":"3937bbcbbe1137e0a17ef3e9cf78fd0ee04f2163","scripts":{"lint":"eslint --ext .ts,.tsx src","build":"rm -rf dist/* ; rollup --config","storybook":"start-storybook -p 6006","prepublishOnly":"npm run build"},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"repository":{"url":"git+https://github.com/BigglesZX/react-sanity-image.git","type":"git"},"_npmVersion":"8.5.5","description":"Simple React components for presenting images from Sanity","directories":{},"_nodeVersion":"16.15.0","dependencies":{"@sanity/image-url":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","tslib":"^2.4.0","eslint":"^8.20.0","rollup":"^2.77.2","ts-node":"^10.9.1","react-dom":"^18.2.0","typescript":"^4.7.4","@types/node":"^18.6.3","@types/react":"^18.0.15","@sanity/client":"^3.3.2","@storybook/react":"^6.5.9","@types/react-dom":"^18.0.6","eslint-plugin-react":"^7.30.1","eslint-plugin-compat":"^4.0.2","eslint-plugin-storybook":"^0.6.1","@rollup/plugin-typescript":"^8.3.4","@typescript-eslint/parser":"^5.31.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^6.5.9","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":"^18.2.0","@sanity/client":"^3.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-sanity-image_0.1.3_1663666403843_0.8800948185692921","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@biggleszx/react-sanity-image","version":"0.2.0","keywords":["sanity","react","image","picture"],"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","_id":"@biggleszx/react-sanity-image@0.2.0","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"dist":{"shasum":"38926dd8419dd3e6de0c2c638f156d4d4dabe39e","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-0.2.0.tgz","fileCount":12,"integrity":"sha512-Qnn95IH2P9fLGUSIw6dOmkBj1BIQBQy7EUIBy9MZituUig4Rt0JSEAATDUIzHH8+gdmS1lySofD996FLErOY/A==","signatures":[{"sig":"MEQCIFQfVErMYiSVwWua8XFaFVTtEoFhjsl7p6ERNY47qBP+AiALl1H/ew2YFk2xw2DKQ5TvbncWBdnBcx/CB6CmO6gk4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30555},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","engines":{"node":">=16.15.0"},"gitHead":"96cfb40322eb2244066cb61f94696700fbb9e18b","scripts":{"lint":"eslint --ext .ts,.tsx src","build":"rm -rf dist/* ; rollup --config","storybook":"start-storybook -p 6006","prepublishOnly":"npm run build"},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"repository":{"url":"git+https://github.com/BigglesZX/react-sanity-image.git","type":"git"},"_npmVersion":"8.5.5","description":"Simple React components for presenting images from Sanity","directories":{},"_nodeVersion":"16.15.0","dependencies":{"@sanity/image-url":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","tslib":"^2.4.0","eslint":"^8.20.0","rollup":"^2.77.2","ts-node":"^10.9.1","react-dom":"^18.2.0","typescript":"^4.7.4","@types/node":"^18.6.3","@types/react":"^18.0.15","@sanity/client":"^3.3.2","@storybook/react":"^6.5.9","@types/react-dom":"^18.0.6","eslint-plugin-react":"^7.30.1","eslint-plugin-compat":"^4.0.2","eslint-plugin-storybook":"^0.6.1","@rollup/plugin-typescript":"^8.3.4","@typescript-eslint/parser":"^5.31.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^6.5.9","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":"^18.2.0","@sanity/client":"^3.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-sanity-image_0.2.0_1686172068090_0.9933806724355194","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@biggleszx/react-sanity-image","version":"0.3.0","keywords":["sanity","react","image","picture"],"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","_id":"@biggleszx/react-sanity-image@0.3.0","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"dist":{"shasum":"f29fc62e9cc391ed080130055fee9151630e0882","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-0.3.0.tgz","fileCount":12,"integrity":"sha512-sXgC25wej4gdAFRyZvZ8orxzyozCHcjk3RBHd4mlKiGGVXfh3DUu2vUYxhPYzQIbu0jiIjb4PUQJfAcftMb2+g==","signatures":[{"sig":"MEUCIQD33JEmcGXThXnKkQr/anys6/rBeS7kfYh+hHNpsFsZWAIgLnzx5oISQD5lODH5TwYGH08f8C2Vw6TdnNdoZQvRfCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30933},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","engines":{"node":">=16.15.0"},"gitHead":"26b0e07a6fa78bd81ae62ee3aaecff77c5c50bcc","scripts":{"lint":"eslint --ext .ts,.tsx src","build":"rm -rf dist/* ; rollup --config","storybook":"start-storybook -p 6006","prepublishOnly":"npm run build"},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"repository":{"url":"git+https://github.com/BigglesZX/react-sanity-image.git","type":"git"},"_npmVersion":"8.5.5","description":"Simple React components for presenting images from Sanity","directories":{},"_nodeVersion":"16.15.0","dependencies":{"@sanity/image-url":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","tslib":"^2.4.0","eslint":"^8.20.0","rollup":"^2.77.2","ts-node":"^10.9.1","react-dom":"^18.2.0","typescript":"^4.7.4","@types/node":"^18.6.3","@types/react":"^18.0.15","@sanity/client":"^3.3.2","@storybook/react":"^6.5.9","@types/react-dom":"^18.0.6","eslint-plugin-react":"^7.30.1","eslint-plugin-compat":"^4.0.2","eslint-plugin-storybook":"^0.6.1","@rollup/plugin-typescript":"^8.3.4","@typescript-eslint/parser":"^5.31.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^6.5.9","@typescript-eslint/eslint-plugin":"^5.31.0"},"peerDependencies":{"react":"^18.2.0","@sanity/client":"^3.3.2"},"_npmOperationalInternal":{"tmp":"tmp/react-sanity-image_0.3.0_1729579541944_0.024131465729587465","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@biggleszx/react-sanity-image","version":"1.0.0","keywords":["sanity","react","image","picture"],"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","_id":"@biggleszx/react-sanity-image@1.0.0","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"dist":{"shasum":"3f953fc77f6e3bf1c17cc7e747ab748953a676d6","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-1.0.0.tgz","fileCount":12,"integrity":"sha512-1vhi32JdQ172NbPSswXj01PTajusvQW3FOX+YATtXM+NbM3Nptk7CA/5myPstUZLvLUh0iq1++lvJ1IAO6/HDQ==","signatures":[{"sig":"MEUCIQD3DTpaX0VeDcW9II+Ac+WlAUxZCmZB8QpZm8Tf+INjngIgX0a/6ZMWvHpeGQQN6hp4a4gCehCtvUMuRslEggx4opk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34030},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","engines":{"node":">=18"},"gitHead":"5d81919094583ce665831af04b4d41238587b335","scripts":{"lint":"eslint --ext .ts,.tsx src","build":"rm -rf dist/* ; rollup --config","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"repository":{"url":"git+https://github.com/BigglesZX/react-sanity-image.git","type":"git"},"_npmVersion":"10.8.2","description":"Simple React components for presenting images from Sanity","directories":{},"_nodeVersion":"18.20.6","browserslist":["defaults"],"dependencies":{"@sanity/image-url":"^1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","tslib":"^2.8.1","eslint":"^9.26.0","rollup":"^4.40.2","ts-node":"^10.9.2","prettier":"^3.5.3","react-dom":"^18.3.1","storybook":"^8.6.12","@eslint/js":"^9.26.0","typescript":"^5.8.3","@types/node":"^18.19.97","@types/react":"^18.3.1","@sanity/client":"^6.29.1","@storybook/test":"^8.6.12","@storybook/react":"^8.6.12","@types/react-dom":"^18.3.1","@storybook/blocks":"^8.6.12","typescript-eslint":"^8.32.0","eslint-plugin-react":"^7.37.5","eslint-plugin-compat":"^6.0.2","eslint-plugin-storybook":"^0.12.0","@rollup/plugin-typescript":"^12.1.2","@storybook/react-webpack5":"^8.6.12","@rollup/plugin-node-resolve":"^16.0.1","@storybook/addon-essentials":"^8.6.12","@storybook/addon-interactions":"^8.6.12","@storybook/addon-webpack5-compiler-swc":"^3.0.0"},"peerDependencies":{"react":"^18.3.1","@sanity/client":"^3||^4||^5"},"_npmOperationalInternal":{"tmp":"tmp/react-sanity-image_1.0.0_1746632804677_0.027903711372841977","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@biggleszx/react-sanity-image","version":"1.0.1","description":"Simple React components for presenting images from Sanity","author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"main":"dist/index.cjs.js","module":"dist/index.es.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/BigglesZX/react-sanity-image.git"},"homepage":"https://github.com/BigglesZX/react-sanity-image#readme","bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"keywords":["sanity","react","image","picture"],"license":"MIT","dependencies":{"@sanity/image-url":"^1.1.0"},"devDependencies":{"@eslint/js":"^9.26.0","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-typescript":"^12.1.2","@sanity/client":"^6.29.1","@storybook/addon-essentials":"8.6.17","@storybook/addon-interactions":"8.6.17","@storybook/addon-webpack5-compiler-swc":"^3.0.0","@storybook/blocks":"8.6.17","@storybook/react":"8.6.17","@storybook/react-webpack5":"8.6.17","@storybook/test":"8.6.17","@types/node":"^18.19.130","@types/react":"^18.3.1","@types/react-dom":"^18.3.1","eslint":"^9.39.4","eslint-plugin-compat":"^6.0.2","eslint-plugin-react":"^7.37.5","eslint-plugin-storybook":"^0.12.0","prettier":"^3.5.3","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^4.60.2","storybook":"8.6.17","ts-node":"^10.9.2","tslib":"^2.8.1","typescript":"^5.8.3","typescript-eslint":"^8.32.0"},"peerDependencies":{"@sanity/client":"^3||^4||^5","react":"^18.3.1"},"overrides":{"@rollup/pluginutils":{"picomatch":"^4.0.4"},"follow-redirects":"^1.16.0","minimatch":"^9.0.7","picomatch":"^2.3.2","qs":"^6.14.1","webpack":"^5.104.0"},"engines":{"node":">=18"},"browserslist":["defaults"],"scripts":{"build":"rm -rf dist/* ; rollup --config","lint":"eslint --ext .ts,.tsx src","prepublishOnly":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_id":"@biggleszx/react-sanity-image@1.0.1","gitHead":"b035c30b6f3defc8e7955a211af4e17eda00ca73","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-R3Sz12WZk7dx2Q4mKzDrmH49VqaGedltqVfBCU3XCtiVq/IC8fQ+odxPsthQs0242IC93exB8dwJPk0B5CVbMg==","shasum":"8e1bfb08d5f48c9cc472e0ef4136a633b07b69c6","tarball":"https://registry.npmjs.org/@biggleszx/react-sanity-image/-/react-sanity-image-1.0.1.tgz","fileCount":12,"unpackedSize":34284,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCQ7P0MXbEfBtlZcXVXZuw5ZUx8meaFbsKJtl25sBikswIhAIfAiA7OH/YrQOLJOaJ+VkzMMYTuARg6TkFiAwWZSrAK"}]},"_npmUser":{"name":"biggleszx","email":"biggleszx@biggleszx.com"},"directories":{},"maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-sanity-image_1.0.1_1776850195665_0.7852989419953762"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-31T17:26:38.812Z","modified":"2026-04-22T09:29:55.903Z","0.1.0":"2022-07-31T17:26:39.072Z","0.1.1":"2022-07-31T19:47:01.343Z","0.1.2":"2022-08-03T10:13:15.009Z","0.1.3":"2022-09-20T09:33:24.040Z","0.2.0":"2023-06-07T21:07:48.256Z","0.3.0":"2024-10-22T06:45:42.109Z","1.0.0":"2025-05-07T15:46:44.856Z","1.0.1":"2026-04-22T09:29:55.809Z"},"bugs":{"url":"https://github.com/BigglesZX/react-sanity-image/issues"},"author":{"name":"BigglesZX","email":"biggleszx@biggleszx.com"},"license":"MIT","homepage":"https://github.com/BigglesZX/react-sanity-image#readme","keywords":["sanity","react","image","picture"],"repository":{"type":"git","url":"git+https://github.com/BigglesZX/react-sanity-image.git"},"description":"Simple React components for presenting images from Sanity","maintainers":[{"name":"biggleszx","email":"biggleszx@biggleszx.com"}],"readme":"# react-sanity-image\n\nSimple React components for making use of images hosted on the [Sanity.io](https://sanity.io/) CDN. I'm using Next.js and didn't really like the extra markup and apparent complexity of [next/image](https://nextjs.org/docs/api-reference/next/image) so decided to try to create some simple components to provide some of that functionality at lower cognitive cost, and without being Next-specific. I'm not sure if this was a good decision. This package provides:\n\n- An `Img` component that generates `srcset` values for a specified range of image widths (or a sensible defaults in `DEFAULT_SOURCE_WIDTHS`).\n- Also accepts an optional `aspectRatio` prop to ensure generated images are cropped to a specific ratio.\n- A `Picture` component that wraps the above, providing a `media` prop allowing different aspect ratios to be specified for different media conditions, to satisfy the art-direction use-case.\n- Images support optional `lqip` prop which displays the image's [Low Quality Image Placeholder](https://www.sanity.io/docs/image-metadata#74bfd1db9b97) as a `background-image`.\n- Images support WebP format using Sanity's automatic content negotiation.\n- Images have `width` and `height` attributes set automatically based on the supplied `aspectRatio` or intrinsic size of the image, to prevent layout shifts.\n\nThis package is currently distributed in ES Module and CommonJS formats. This is my first npm package and I don't really know what I'm doing but those two options seemed popular. Structure of this package and README is inspired by [`next-sanity-image`](https://github.com/bundlesandbatches/next-sanity-image/), with thanks.\n\n## Installation\n\n```\nnpm install --save @biggleszx/react-sanity-image\n```\n\nThe components require you to pass in a [SanityClient](https://www.npmjs.com/package/@sanity/client) instance, so you'll also need to install that if you haven't already:\n\n```\nnpm install --save @sanity/client\n```\n\n## Usage\n\nImport the component(s) you want to use:\n\n```js\nconst { Img, Picture } = require('@biggleszx/react-sanity-image');\n// or\nimport { Img, Picture } from '@biggleszx/react-sanity-image';\n```\n\nInstantiate the Sanity client (see the SanityClient [docs](https://www.npmjs.com/package/@sanity/client) for more information about the properties used):\n\n```js\nimport { createClient } from '@sanity/client';\n\nconst client = createClient({\n    projectId: 'xxxxxxxx',\n    dataset: 'production',\n    apiVersion: '2022-03-14',\n    useCdn: true,\n});\n```\n\nAssuming you've already queried a document from Sanity that includes an image field (there's an example [here](https://www.sanity.io/docs/presenting-images#BnS1mFRw); let's say it's `person` and the field is `person.image`), render the `Img` component like this:\n\n```jsx\n// Basic usage at intrinsic aspect ratio\n<Img\n    client={client}\n    image={person.image}\n/>\n\n// Passing options to the URL builder, including `sourceWidths` to override `DEFAULT_SOURCE_WIDTHS`\n<Img\n    client={client}\n    image={person.image}\n    builderOptions={{\n        blur: 50,\n        sourceWidths: [100, 200, 300],\n    }}\n/>\n\n// Specifying aspect ratio and `sizes` attribute, and enabling `lqip`\n<Img\n    client={client}\n    image={person.image}\n    aspectRatio={9/16}\n    sizes=\"50vw\"\n    lqip\n/>\n\n// Any other props will be passed to the rendered `<img>` element\n<Img\n    client={client}\n    image={person.image}\n    alt={person.name}\n    loading=\"lazy\"\n/>\n```\n\nThe `Picture` component is similar but supports an additional `media` prop for adding extra sources:\n\n```jsx\n<Picture\n    client={client}\n    image={person.image}\n    aspectRatio={1 / 1}\n    media={[\n        {\n            media: '(min-width: 1024px)',\n            aspectRatio: 9 / 16,\n        },\n    ]}\n    sizes=\"(min-width: 1024px) 50vw, 100vw\"\n/>\n```\n\nIt also supports `builderOptions` like `Img` does, which will be applied to all URLs that are created:\n\n```jsx\n<Picture\n    client={client}\n    image={person.image}\n    builderOptions={{\n        blur: 50,\n    }}\n/>\n```\n\nOrder of `media` items matters the same way ordering `source` elements inside `<picture>` matters (i.e. the browser will use the first match that it encounters).\n\nSanity's CDN will automatically serve WebP format images to browsers that support them, so there's no need to include any extra sources for these (you can't specify the `type` attribute at the moment anyway).\n\nFinally, any extra props passed to `Picture` **will be set on the rendered `<picture>` element**. If you want to specify extra props for the `<img>` element inside it, use `imgProps`:\n\n```jsx\n<Picture\n    client={client}\n    image={person.image}\n    className=\"my-picture-class\"\n    imgProps={{\n        alt: person.name,\n        loading: 'lazy',\n    }}\n/>\n```\n\n## Development\n\nClone the project, activate [`nvm`](https://github.com/nvm-sh/nvm#install--update-script), if that's your thing, and install:\n\n```shell\n$ git clone git@github.com:BigglesZX/react-sanity-image.git\n$ cd react-sanity-image\n$ nvm use  # `nvm install` if necessary\n$ npm install\n```\n\nStorybook is included to facilitate local development and testing. You'll need to configure a connection to a Sanity project from which an image asset can be retrieved for use in stories.\n\nCopy the included `.env.example` file to `.env` and edit it to add your project details and the ID of an asset to fetch. You can find one by querying `imageAsset` documents within your project (`*[_type == \"sanity.imageAsset\"]`).\n\n```\nSANITY_PROJECT_ID=\"xxxxxxxx\"\nSANITY_DATASET=\"production\"\nSANITY_ASSET_ID=\"image-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-1024x1024-jpg\"\n```\n\nAdd the contents of the `.env` file to your environment using whatever means you like ([dotenv](https://github.com/motdotla/dotenv), etc) – the simplest way is to `source` the file in Bash-like shells:\n\n```shell\n$ source .env\n```\n\nLastly you'll need to allow CORS access to Sanity from the Storybook instance. Head to the Sanity [management dashboard](https://www.sanity.io/manage/), click on your project, then choose the **API** tab and click **CORS origins**. Click **Add CORS origin** and enter `http://localhost:6006` (or other Storybook origin). You don't need to allow credentials.\n\nStart Storybook:\n\n```shell\n$ npm run storybook\n```\n\n## API\n\n### `Img`\n\n| property         | type                                                                                                       | description                                                                                                                                                                                                                                                                                                                                |\n| ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `client`         | [`SanityClient`](https://www.npmjs.com/package/@sanity/client)                                             | Client instance to use when building image URLs                                                                                                                                                                                                                                                                                            |\n| `image`          | [`SanityImageSource`](https://www.npmjs.com/package/@sanity/image-url#imagesource)                         | A reference to a Sanity image asset. You can pass in any asset that is also supported by the [image() method of @sanity/image-url](https://www.npmjs.com/package/@sanity/image-url#imagesource).                                                                                                                                           |\n| `aspectRatio`    | <code>number &#124; null<code>                                                                             | Aspect ratio (`height ÷ width`) to which the source image should be cropped, e.g. `9/16` or `0.5625` for a 16:9 image. If omitted or set to `null`, the intrinsic aspect ratio of the source will be used.                                                                                                                                 |\n| `lqip`           | `boolean`                                                                                                  | Set to `true` to use the image's [Low Quality Image Placeholder](https://www.sanity.io/docs/image-metadata#74bfd1db9b97) as a placeholder (via CSS `background-image`). Requires that `lqip` be enabled in the image field's `metadata` setting – I think this needs to be present at time of of upload, but maybe not in recent versions. |\n| `sizes`          | `string`                                                                                                   | String to use for the rendered `<img>` element's [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) attribute. See example in **Usage** above.                                                                                                                                                            |\n| `builderOptions` | [`ImageUrlBuilderOptionsWithAliases`](https://github.com/sanity-io/image-url/blob/v1.0.2/src/types.ts#L31) | The options that will be passed to the URL builder                                                                                                                                                                                                                                                                                         |\n\n### `Picture`\n\n| property         | type                                                                                                       | description                                                                                                                                                                                                                                        |\n| ---------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `client`         | [`SanityClient`](https://www.npmjs.com/package/@sanity/client)                                             | Client instance to use when building image URLs                                                                                                                                                                                                    |\n| `image`          | [`SanityImageSource`](https://www.npmjs.com/package/@sanity/image-url#imagesource)                         | A reference to a Sanity image asset. You can pass in any asset that is also supported by the [image() method of @sanity/image-url](https://www.npmjs.com/package/@sanity/image-url#imagesource).                                                   |\n| `aspectRatio`    | <code>number &#124; null<code>                                                                             | Aspect ratio (`height ÷ width`) to which the source image should be cropped **for the default source**, i.e. if no media conditions match. If omitted or set to `null`, the intrinsic aspect ratio of the source will be used.                     |\n| `lqip`           | `boolean`                                                                                                  | Set to `true` to use the image's [Low Quality Image Placeholder](https://www.sanity.io/docs/image-metadata#74bfd1db9b97) as a placeholder                                                                                                          |\n| `media`          | `[{ media: string, aspectRatio: number, sizes: string }]`                                                  | Specify an array of media conditions and aspect ratios which will be used to render `<source>` elements in the resulting `<picture>`. Order of items matters (the browser will use the first match it encounters). See example in **Usage** above. |\n| `sizes`          | `string`                                                                                                   | String to use for the rendered `<img>` element's [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) attribute. See example in **Usage** above.                                                                    |\n| `imgProps`       | `object`                                                                                                   | Any extra props to pass through to the rendered `<img>` element                                                                                                                                                                                    |\n| `builderOptions` | [`ImageUrlBuilderOptionsWithAliases`](https://github.com/sanity-io/image-url/blob/v1.0.2/src/types.ts#L31) | The options that will be passed to the URL builder                                                                                                                                                                                                 |\n\n## Creating a new version for npm\n\nThis is mostly for my benefit.\n\n1. Bump version number in `package.json`\n1. Update `CHANGELOG`\n1. `$ git commit ...`\n1. `$ git tag -a x.x.x` (check `git tag` for current)\n1. `$ git push origin main`\n1. `$ git push --tags`\n1. `$ npm publish --access public`\n\n## TODO\n\n- Correct various as-yet unrealised bad decisions.\n","readmeFilename":"README.md"}