{"id":13422571,"url":"https://github.com/loktar00/react-lazy-load","last_synced_at":"2025-05-14T08:09:10.814Z","repository":{"id":50499238,"uuid":"31480732","full_name":"loktar00/react-lazy-load","owner":"loktar00","description":"React component that renders children elements when they enter the viewport.","archived":false,"fork":false,"pushed_at":"2024-10-14T15:10:54.000Z","size":346,"stargazers_count":981,"open_issues_count":20,"forks_count":165,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-14T22:02:49.797Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loktar00.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2015-02-28T23:37:34.000Z","updated_at":"2025-03-03T16:12:36.000Z","dependencies_parsed_at":"2024-11-17T20:00:36.826Z","dependency_job_id":"5f43e9b0-0089-4443-86ed-6fe722263cfe","html_url":"https://github.com/loktar00/react-lazy-load","commit_stats":{"total_commits":106,"total_committers":28,"mean_commits":"3.7857142857142856","dds":0.6037735849056604,"last_synced_commit":"03aa118cae7fed05b7463842bc7d8ea78d3db9f9"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loktar00%2Freact-lazy-load","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loktar00%2Freact-lazy-load/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loktar00%2Freact-lazy-load/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loktar00%2Freact-lazy-load/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loktar00","download_url":"https://codeload.github.com/loktar00/react-lazy-load/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101558,"owners_count":22014908,"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":[],"created_at":"2024-07-30T23:00:48.018Z","updated_at":"2025-05-14T08:09:05.801Z","avatar_url":"https://github.com/loktar00.png","language":"TypeScript","funding_links":[],"categories":["Performance","Uncategorized","UI Components","TypeScript","🧰 React Toolkit"],"sub_categories":["UI","Uncategorized","Lazy Load","Performance Optimization"],"readme":"React Lazy Load Component\n=========================\n\nReact Lazy Load is an easy-to-use React component which helps you defer loading content in predictable way. It's fast, You can also use component inside scrolling container, such as div with scrollbar. It will be found automatically. Check out an example.\n\n[![build status](https://img.shields.io/travis/loktar00/react-lazy-load.svg?style=flat-square)](https://travis-ci.org/loktar00/react-lazy-load)\n[![npm downloads](https://img.shields.io/npm/dm/react-lazy-load.svg?style=flat-square)](https://www.npmjs.com/package/react-lazy-load)\n\n## 4.0 Update\nConverted to work with React 18, and updated to use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n\n### Breaking changes\n* No more debunce, or throttle options as they aren't needed\n* Removed individual offset props, offset can be used just like css margin, eg. `offset={'0px 10px 200px 0px'}` or `offset={100}`\n\n### Improvements\nSince we're now using the intersection observer we don't need to watch a user scroll, more importantly we don't have to manually calculate if a user can see the element or not.\nAlso took this oppourtunity to convert over to TS.\n\n## Installation\nReact Lazy Load requires **React 17 or later.**\n\n```\nnpm i -S react-lazy-load\n```\n\n## Examples\n* [In Repo](https://github.com/loktar00/react-lazy-load/tree/master/examples/basic)\n\n## Examples\n\n### Basic Usage\n```jsx\nimport React from 'react';\nimport LazyLoad from 'react-lazy-load';\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cLazyLoad height={762}\u003e\n      \u003cimg src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' /\u003e\n    \u003c/LazyLoad\u003e\n  \u003c/div\u003e\n)\n```\n\n### Loading the image 300px prior to scroll\n\n```jsx\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cLazyLoad height={762} offset={300}\u003e\n      \u003cimg src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' /\u003e\n    \u003c/LazyLoad\u003e\n  \u003c/div\u003e\n)\n```\n\n### Loading image only when 95% of it is in the viewport. **note** a width must be specified.\n\n```jsx\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cLazyLoad height={762} width={400} threshold={0.95}\u003e\n      \u003cimg src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' /\u003e\n    \u003c/LazyLoad\u003e\n  \u003c/div\u003e\n)\n```\n\n### Performing a side effect once your image is loaded\n\n```jsx\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cLazyLoad height={762} width={400} threshold={0.95} onContentVisible={() =\u003e {console.log('loaded!')}}\u003e\n      \u003cimg src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' /\u003e\n    \u003c/LazyLoad\u003e\n  \u003c/div\u003e\n)\n```\n\n\n### Example controlling element transition\n\nThere are two primary classes you an use to control the component `LazyLoad` and `is-visible`\n\n\n```css\n/* Example of how to fade our content in */\n\n.LazyLoad {\n  opacity: 0;\n  transition: all 1s ease-in-out;\n}\n\n.is-visible {\n  opacity: 1;\n}\n```\n\n## Props\n\n#### offset\nType: `Number|String` Default: `0`\n\nThe `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want to _begin_ displaying your content. If you specify `0`, your content will be displayed as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`.\n\n#### threshold\nType: `Number` Default: `0`\n\nThis `threshold` option allows you to specify how much of the element must be shown on the screen prior to loading. This requires a _width_ and _height_ to be set on the `\u003cLazyLoad\u003e` component in order for the browser to calcualte the viewable area.\n\n#### height\nType: `String|Number`\n\nThe `height` option allows you to set the element's height even when it has no content.\n\n#### width\nType: `String|Number`\n\nThe `width` option allows you to set the element's width even when it has no content.\n\n#### onContentVisible\nType `Function`\n\nA callback function to execute when the content appears on the screen.\n\n\n## Building LazyLoad\n\n```\nnpm run build\n```\n\n## Running examples\n\n```\ncd examples/basic\nnpm run dev\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floktar00%2Freact-lazy-load","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floktar00%2Freact-lazy-load","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floktar00%2Freact-lazy-load/lists"}