{"id":13823014,"url":"https://github.com/yosbelms/react-progressive-loader","last_synced_at":"2025-05-16T03:03:36.693Z","repository":{"id":57342746,"uuid":"149545847","full_name":"yosbelms/react-progressive-loader","owner":"yosbelms","description":"Utility to load images and React components progressively, and get code splitting for free","archived":false,"fork":false,"pushed_at":"2024-11-30T17:29:21.000Z","size":151,"stargazers_count":215,"open_issues_count":6,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-10T19:16:24.626Z","etag":null,"topics":["img","lazy-loading","lazyload","loadable","medium","progressive","react","reactjs"],"latest_commit_sha":null,"homepage":"","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/yosbelms.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":"2018-09-20T03:27:16.000Z","updated_at":"2025-03-23T10:09:13.000Z","dependencies_parsed_at":"2024-06-18T21:27:07.389Z","dependency_job_id":"f953818a-80fa-4454-8351-406480029965","html_url":"https://github.com/yosbelms/react-progressive-loader","commit_stats":{"total_commits":26,"total_committers":5,"mean_commits":5.2,"dds":"0.34615384615384615","last_synced_commit":"b32eaeff61fafdf8f66ef87402c1276223115dcd"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-progressive-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-progressive-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-progressive-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosbelms%2Freact-progressive-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yosbelms","download_url":"https://codeload.github.com/yosbelms/react-progressive-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459082,"owners_count":22074604,"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":["img","lazy-loading","lazyload","loadable","medium","progressive","react","reactjs"],"created_at":"2024-08-04T08:02:29.818Z","updated_at":"2025-05-16T03:03:31.680Z","avatar_url":"https://github.com/yosbelms.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Progressive Loader\n\nDefer the load of non-critical images and components if they are off-screen.\n\nThis library makes possible to progressively load images, just like [Medium](https://medium.com) does, and React components only when the user is ready to consume the content. Additionaly, take component based code splitting for free. Two at the price of one.\n\nLazy Loading Images: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/\n\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n  * [Defer](#defer)\n  * [Img](#img)\n\n## Installation\n\n```\n// with yarn\nyarn add react-progressive-loader\n\n// with npm\nnpm install react-progressive-loader\n```\n\n## Usage\n\n```ts\n// ES2015+ and TS\nimport { Defer, Img } from 'react-progressive-loader'\n```\n\n## Components\n\n### Defer\n\nDefers the loading of a React component\n\nProps:\n* `render`: The content to render\n* `renderPlaceholder`: The content to render while the content is loading\n* `loadOnScreen`: Load the content only when the area it is going to be rendered is visible for the user\n\nIf case the React component is `default-exported` in `./comp` module\n\n```jsx\n\u003cDefer\n  render={() =\u003e import('./comp')}\n  renderPlaceholder={() =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e}\n/\u003e\n```\n\nIf the component is not `default-exported`\n\n```jsx\n// './comp.jsx'\nexport const MyComp = () =\u003e 'Loaded!'\n\n// './app.jsx'\n\u003cDefer\n  render={() =\u003e import('./comp').then(({MyComp}) =\u003e \u003cMyComp /\u003e)}\n/\u003e\n```\n\nThe `render` prop can also be a React element\n\n```jsx\n\u003cDefer\n  render={() =\u003e \u003cimg src='my-img.png'\u003e\u003c/img\u003e}\n  renderPlaceholder={() =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e}\n/\u003e\n```\n\nLoad the content only when it is on-screen\n\n```jsx\n\u003cDefer\n  render={() =\u003e \u003cimg src='my-img.png'\u003e\u003c/img\u003e}\n  renderPlaceholder={() =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e}\n  loadOnScreen\n/\u003e\n```\n\n### Img\n\nProgressively load images. This component makes a smooth animated transition in the following order:\n\n`[Background]-\u003e[Placeholder]-\u003e[Content]`\n\nProps:\n* `src`: The source of the content\n* `placeholderSrc`: The source of the image that is going to be showed while the content is loading\n* `srcSet`: The source of the content (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)\n* `sizes`: A set of source sizes (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)\n* `bgColor`: The color of the backgroud that is going to be showed while the placeholder is loading\n* `aspectRatio`: A static aspect ratio for image, placeholder, and background color. The aspect ratio provided must be calculated in the following way: `height / width`\n* `loadOnScreen`: Load the content only when the area it is going to be rendered is visible for the user\n* `alt`: Alternative text (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)\n\n_Any other prop (not listed here) passed to this components will be passed down to the wrapper `div`_\n\nBasic usage\n\n```jsx\n\u003cImg\n  src='image.jpeg'\n  placeholderSrc='image-placeholder.jpeg'\n/\u003e\n```\n\nTransitioning only between background and content. Sometimes you may want to transit only from background to content by finding the dominant color of the image and assigning it to `bgColor`. This strategy is used by [Google](https://www.google.com) image search.\n\n```jsx\n\u003cImg\n  bgColor='#FA8054'\n  src='image.jpeg'\n/\u003e\n```\n\nLoad the content only when it is on-screen\n\n```jsx\n\u003cImg\n  src='image.jpeg'\n  placeholderSrc='image-placeholder.jpeg'\n  loadOnScreen\n/\u003e\n```\n\n_This library uses IntersectionObserver API, for wide browser compatibility consider to add a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)_\n\nPublished under MIT Licence\n\n(c) Yosbel Marin 2018\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosbelms%2Freact-progressive-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyosbelms%2Freact-progressive-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosbelms%2Freact-progressive-loader/lists"}