{"_id":"@amaanwarsi/imgx","name":"@amaanwarsi/imgx","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@amaanwarsi/imgx","version":"0.1.0","description":"Framework-agnostic image loading enhancements with selective targeting, lazy loading, and pluggable renderers.","type":"module","main":"./src/index.js","module":"./src/index.js","scripts":{"build:cdn":"node scripts/build-cdn.mjs","prepack":"npm run build:cdn"},"exports":{".":"./src/index.js"},"sideEffects":false,"keywords":["images","lazy-loading","placeholders","intersectionobserver","esm","image-placeholder","image-renderer","performance","cdn"],"homepage":"https://github.com/amaanwarsi/ImgX#readme","repository":{"type":"git","url":"git+https://github.com/amaanwarsi/ImgX.git"},"bugs":{"url":"https://github.com/amaanwarsi/ImgX/issues"},"publishConfig":{"access":"public"},"license":"MIT","gitHead":"3c8fb400468ac468b9c1dabc6f6063334f52c0b5","_id":"@amaanwarsi/imgx@0.1.0","_nodeVersion":"20.19.2","_npmVersion":"9.2.0","dist":{"integrity":"sha512-5rCw7KGV7Bk8d1HQwp534cFI57e2e5RPMME3CNmweI9zqJipyoKJHX84zYBWT30o1GNqZfDRPqkKUiU9YTZuSQ==","shasum":"ec48754c659b59227022b83428d83b7e82534d4d","tarball":"https://registry.npmjs.org/@amaanwarsi/imgx/-/imgx-0.1.0.tgz","fileCount":12,"unpackedSize":84735,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCcRlY4wLO5g1BOw7RXAwfLVsOtmQEVjlf0/qdme1XTnQIgXOH9A1oX9145F951n8dGk82WJSLTGuXpNc98iLev2oE="}]},"_npmUser":{"name":"amaanwarsi","email":"amaanw526@gmail.com"},"directories":{},"maintainers":[{"name":"amaanwarsi","email":"amaanw526@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/imgx_0.1.0_1776407312606_0.3995421178926437"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-17T06:28:32.524Z","0.1.0":"2026-04-17T06:28:32.762Z","modified":"2026-04-17T06:28:32.923Z"},"maintainers":[{"name":"amaanwarsi","email":"amaanw526@gmail.com"}],"description":"Framework-agnostic image loading enhancements with selective targeting, lazy loading, and pluggable renderers.","homepage":"https://github.com/amaanwarsi/ImgX#readme","keywords":["images","lazy-loading","placeholders","intersectionobserver","esm","image-placeholder","image-renderer","performance","cdn"],"repository":{"type":"git","url":"git+https://github.com/amaanwarsi/ImgX.git"},"bugs":{"url":"https://github.com/amaanwarsi/ImgX/issues"},"license":"MIT","readme":"# Imgx\n\nImgx is a lightweight, framework-agnostic image loading library for the web.\n\nIt only enhances images you explicitly opt into with a configurable `data-*` attribute such as `data-imgx`, and leaves every other `<img>` untouched.\n\n## What It Does\n\n- Selectively targets marked images only\n- Auto-initializes on `DOMContentLoaded`\n- Supports manual `init()` and `rescan()`\n- Tracks a clear lifecycle: `idle -> loading -> loaded -> error`\n- Uses `IntersectionObserver` for lazy loading with fallback behavior\n- Supports global config, per-image overrides, and programmatic overrides\n- Includes built-in renderers:\n- `skeleton`\n- `svgAnimation`\n- `blurPreview`\n- `dominantColor`\n- `fallback`\n- Supports transitions, retry logic, fallback sources, and a plugin API\n\n## Install\n\n```bash\nnpm install @amaanwarsi/imgx\n```\n\n## Quick Start\n\n```html\n<img\n  data-imgx\n  data-imgx-src=\"/images/photo-large.jpg\"\n  alt=\"Example photo\"\n  width=\"1200\"\n  height=\"800\"\n/>\n\n<script type=\"module\">\n  import imgx from \"@amaanwarsi/imgx\";\n</script>\n```\n\nThat is enough for the default browser setup.\n\n## Usage Examples\n\n### 1. Default browser usage\n\n```html\n<img\n  data-imgx\n  data-imgx-src=\"/images/mountain.jpg\"\n  alt=\"Mountain\"\n  width=\"1600\"\n  height=\"900\"\n/>\n\n<script type=\"module\">\n  import imgx from \"@amaanwarsi/imgx\";\n</script>\n```\n\n### 2. Manual instance with custom defaults\n\n```js\nimport { createImgx } from \"@amaanwarsi/imgx\";\n\nconst gallery = createImgx({\n  placeholder: {\n    renderer: \"blurPreview\"\n  },\n  transition: {\n    type: \"blur\",\n    duration: 500\n  }\n});\n\ngallery.init();\n```\n\n### 3. Rescan dynamically added images\n\n```js\nconst grid = document.querySelector(\"[data-gallery]\");\ngallery.rescan(grid);\n```\n\n### 4. Per-image overrides\n\n```html\n<img\n  data-imgx\n  data-imgx-src=\"/images/card.jpg\"\n  data-imgx-preview=\"/images/card-preview.jpg\"\n  data-imgx-renderer=\"blurPreview\"\n  data-imgx-transition=\"blur\"\n  data-imgx-fallback=\"/images/card-fallback.jpg\"\n  alt=\"Card\"\n  width=\"800\"\n  height=\"600\"\n/>\n```\n\n### 5. Priority image that skips lazy loading\n\n```html\n<img\n  data-imgx\n  data-imgx-src=\"/images/hero.jpg\"\n  data-imgx-priority=\"high\"\n  alt=\"Hero\"\n  width=\"1600\"\n  height=\"900\"\n/>\n```\n\n### 6. Custom target attribute\n\n```js\nimport { createImgx } from \"@amaanwarsi/imgx\";\n\nconst productImages = createImgx({\n  targetAttribute: \"data-product-img\"\n});\n\nproductImages.init();\n```\n\n```html\n<img\n  data-product-img\n  data-product-img-src=\"/images/product.jpg\"\n  alt=\"Product\"\n  width=\"900\"\n  height=\"900\"\n/>\n```\n\n### 7. Custom renderer\n\n```js\nimport { createImgx } from \"@amaanwarsi/imgx\";\n\nconst imgx = createImgx();\n\nimgx.registerRenderer(\"dots\", {\n  mount({ overlay }) {\n    overlay.innerHTML = `\n      <div style=\"display:grid;place-items:center;width:100%;height:100%;background:#111;color:#fff\">\n        Loading...\n      </div>\n    `;\n\n    return {\n      update() {},\n      destroy() {\n        overlay.textContent = \"\";\n      }\n    };\n  }\n});\n\nimgx.init();\n```\n\n## Common Per-Image Attributes\n\n- `data-imgx-src`\n- `data-imgx-renderer`\n- `data-imgx-error-renderer`\n- `data-imgx-transition`\n- `data-imgx-lazy`\n- `data-imgx-priority`\n- `data-imgx-preview`\n- `data-imgx-fallback`\n- `data-imgx-retry-attempts`\n- `data-imgx-retry-delay`\n- `data-imgx-skeleton`\n- `data-imgx-radius`\n- `data-imgx-color`\n- `data-imgx-auto`\n\nIf you change `targetAttribute`, the same pattern applies to that new prefix.\n\n## CDN Build\n\nBuild browser-ready files locally:\n\n```bash\nnpm run build:cdn\n```\n\nThis generates:\n\n- `dist/imgx.js`\n- `dist/imgx.min.js`\n\nUsage:\n\n```html\n<script src=\"./dist/imgx.min.js\"></script>\n<script>\n  const gallery = Imgx.createImgx();\n  gallery.init();\n</script>\n```\n\n## API\n\nExports:\n\n- `Imgx`\n- `createImgx(config?)`\n- `imgx`\n- `builtinRenderers`\n- `skeletonRenderer`\n- `svgAnimationRenderer`\n- `blurPreviewRenderer`\n- `dominantColorRenderer`\n- `fallbackRenderer`\n\nInstance methods:\n\n- `init(root?, overrides?)`\n- `rescan(root?, overrides?)`\n- `configure(nextConfig)`\n- `registerRenderer(name, renderer)`\n- `use(plugin)`\n- `enableAutoInit()`\n- `destroy(image)`\n\n## Docs\n\n- [Getting Started](/home/amaan/Desktop/projects/img_lib/docs/getting-started.md)\n- [API Reference](/home/amaan/Desktop/projects/img_lib/docs/api.md)\n- [Renderers](/home/amaan/Desktop/projects/img_lib/docs/renderers.md)\n\n## Contributing\n\nContributions are welcome. See [CONTRIBUTING.md](/home/amaan/Desktop/projects/img_lib/CONTRIBUTING.md).\n\n## License\n\nMIT. See [LICENSE](/home/amaan/Desktop/projects/img_lib/LICENSE).\n","readmeFilename":"README.md","_rev":"1-52882e223d00e6e799325a2146838201"}