{"id":26737290,"url":"https://github.com/denchiklut/loadable-image","last_synced_at":"2025-04-14T13:33:05.497Z","repository":{"id":50318439,"uuid":"518766346","full_name":"denchiklut/loadable-image","owner":"denchiklut","description":"React Component to lazy load images. With smooth transition between loading states","archived":false,"fork":false,"pushed_at":"2025-03-02T18:07:04.000Z","size":40724,"stargazers_count":29,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T02:44:21.367Z","etag":null,"topics":["lazy-image","loadable-image","react"],"latest_commit_sha":null,"homepage":"https://denchiklut.github.io/loadable-image","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/denchiklut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-28T08:38:18.000Z","updated_at":"2025-03-02T18:06:20.000Z","dependencies_parsed_at":"2024-01-10T09:45:04.153Z","dependency_job_id":"1dff421a-4504-4ea8-bafc-fa8689dedfa6","html_url":"https://github.com/denchiklut/loadable-image","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"0f39d053ce0654958b31ca5362e9b53009755e86"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denchiklut%2Floadable-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denchiklut%2Floadable-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denchiklut%2Floadable-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denchiklut%2Floadable-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denchiklut","download_url":"https://codeload.github.com/denchiklut/loadable-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248888824,"owners_count":21178113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lazy-image","loadable-image","react"],"created_at":"2025-03-28T02:39:18.443Z","updated_at":"2025-04-14T13:33:05.454Z","avatar_url":"https://github.com/denchiklut.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## loadable-image\n\n[![NPM Version](https://img.shields.io/npm/v/loadable-image)](https://www.npmjs.com/package/loadable-image)\n[![storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook\u0026logoColor=white)](https://denchiklut.github.io/loadable-image)\n[![NPM Downloads](https://img.shields.io/npm/dw/loadable-image)](https://www.npmjs.com/package/loadable-image)\n[![GitHub Repo stars](https://img.shields.io/github/stars/denchiklut/loadable-image)](https://github.com/denchiklut/loadable-image)\n\n\n\u003cimg src=\"https://github.com/denchiklut/loadable-image/blob/main/public/cover.jpg?raw=true\" alt=\"...\" /\u003e React Component to lazy load images.\n\n[![Edit loadable-image](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/loadable-image-ci4440?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Installation\n ```\n npm i loadable-image\n ```\nOr via yarn\n```\nyarn add loadable-image\n```\n\n## Usage examples\n`\u003cAsyncImage /\u003e` accepts all props of `\u003cimg /\u003e` tag.\n```tsx\nimport { AsyncImage } from 'loadable-image'\n...\n\u003cAsyncImage\n  src='https://picsum.photos/1900'\n  style={{ width: 150, height: 150 }}\n/\u003e\n```\n\n### Custom `Loader`/`Error`\nYou can pass your own `loader` and `error` components as props to `AsyncImage` component.\n```tsx\nimport { AsyncImage } from 'loadable-image'\n...\n\u003cAsyncImage\n  src='https://picsum.photos/1900'\n  style={{ width: 150, height: 150 }}\n  loader={\u003cdiv style={{ background: '#888' }}/\u003e}\n  error={\u003cdiv style={{ background: '#eee' }}/\u003e}\n/\u003e\n```\n\n### Modern formats (WebP, Avif) with fallback\nSince under the hood `\u003cAsyncImage /\u003e` is just a `picture` element. You can pass an array of different `Sources` as a prop. And browser will pick the first one that it supports.\n```tsx\nimport { AsyncImage } from 'loadable-image'\n...\n\u003cAsyncImage\n  src=\"./image.jpg\"\n  sources={[ \n      { type:\"image/avif\",  srcSet:\"./image.avif\" }, \n      { type:\"image/webp\",  srcSet:\"./image.webp\" } \n  ]}\n  style={{ width: 200, height: 200 }}\n/\u003e\n```\n\n### Responsive image\nTo make image responsive you can use `aspectRatio` property in `style` prop. This way you can specify only `width` or `height` as `100%` and the other one as `auto`.\nNote that if you support older browsers you might need to use `aspectRatio` [padding-hack](https://nikitahl.com/css-aspect-ratio).\n```tsx\nimport { AsyncImage } from 'loadable-image'\n...\n\u003cAsyncImage\n  src='https://picsum.photos/1900'\n  style={{ width: \"100%\", height: \"auto\", aspectRatio: 16 / 9 }}\n/\u003e\n```\n\n## Custom Transitions\nUnder the hood `AsyncImage` uses [transitions-kit](https://github.com/denchiklut/transitions-kit) library\nit's a collection Transition components built on top of [react-transition-group](https://github.com/reactjs/react-transition-group) its a small library maintained by **React** team for animating between different views.\nYou can pass your own `Transition` as a prop to `AsyncImage` component.\n\n### Blur transition\nHere’s how you can implement a `Blur` transition that replaces a `low-resolution image` with a `high-resolution` one\n```tsx\nimport { Blur } from 'transitions-kit'\nimport { AsyncImage } from 'loadable-image'\n...\n\u003cAsyncImage\n  src='./original-image.jpg'\n  style={{ width: 150, height: 150 }}\n  Transition={props =\u003e \u003cBlur radius={10} {...props}/\u003e}\n  loader={\u003cimg src='./extra-small-1x1.jpg' /\u003e}\n/\u003e\n```\n\n### Fade transition\nBy default `AsyncImage` uses `Fade` transition.\n```tsx\nimport { Fade } from 'transitions-kit'\nimport { AsyncImage } from 'loadable-image'\n...\n\u003cAsyncImage\n  src='https://picsum.photos/1900'\n  style={{ width: 150, height: 150 }}\n  loader={\u003cdiv style={{ background: '#888' }}/\u003e}\n  Transition={Fade}\n/\u003e\n```\n\n### Other transitions\nThere are plenty different already predefined Transition components such as `Grow`, `Zoom`, `Slide`, `Blur`, `Fade` etc. in [transitions-kit](https://github.com/denchiklut/transitions-kit).\nFeel free to try any of them. \n```tsx\nimport { Grow } from 'transitions-kit'\nimport { AsyncImage } from 'loadable-image'\n...\n\u003cAsyncImage\n  src='https://picsum.photos/1900'\n  style={{ width: 150, height: 150 }}\n  loader={\u003cdiv style={{ background: '#888' }}/\u003e}\n  Transition={Grow}\n/\u003e\n```\n\n\n### Props\n`\u003cAsyncImage /\u003e` accepts all standard props for `HtmlImageElement` and the following:\n\n| Property   | Type                               | Description                                                                                                                             |\n|------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|\n| className  | `String`                           | NOTE: CSS from `style` object has a higher priority                                                                                     |\n| style      | `CSSProperties`                    | CSSStyleDeclaration object                                                                                                              |\n| rootMargin | `string` by default: `'600px 0px'` | Margin around the root. Specifies when to trigger an image download.                                                                    |\n| loader     | `ReactElement`                     | React element to display a `loading` state.                                                                                             |\n| error      | `ReactElement`                     | React element to display an `error` state.                                                                                              |\n| sources    | `Array\u003cSourceProps\u003e`               | An array of `options` for `\u003csource /\u003e` element.                                                                                         |\n| timeout    | `Number` or `Object`               | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |\n| Transition | `ComponentType\u003cTransitionProps\u003e`   | Custom Transition component. Check out [transitions-kit](https://github.com/denchiklut/transitions-kit)'s predefined components         |\n\n### Requirements for loader \u0026 error props:\n- Forward the ref: The transition components require the first child element to forward its ref to the DOM node. This is usually done with React.forwardRef.\n- Single element: The transition components require only one child element (React.Fragment is not allowed).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenchiklut%2Floadable-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenchiklut%2Floadable-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenchiklut%2Floadable-image/lists"}