{"id":20307118,"url":"https://github.com/jadbox/react-lazy-load-component","last_synced_at":"2025-08-19T05:11:41.969Z","repository":{"id":57333773,"uuid":"195296566","full_name":"jadbox/react-lazy-load-component","owner":"jadbox","description":"A special component that'll lazy load your react components when they are in view","archived":false,"fork":false,"pushed_at":"2025-07-21T23:29:50.000Z","size":548,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T14:33:12.535Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jadbox.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}},"created_at":"2019-07-04T20:14:38.000Z","updated_at":"2021-08-30T15:13:32.000Z","dependencies_parsed_at":"2022-08-24T21:41:02.400Z","dependency_job_id":null,"html_url":"https://github.com/jadbox/react-lazy-load-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jadbox/react-lazy-load-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Freact-lazy-load-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Freact-lazy-load-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Freact-lazy-load-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Freact-lazy-load-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jadbox","download_url":"https://codeload.github.com/jadbox/react-lazy-load-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadbox%2Freact-lazy-load-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271103202,"owners_count":24699646,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-14T17:16:19.830Z","updated_at":"2025-08-19T05:11:41.941Z","avatar_url":"https://github.com/jadbox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-lazy-load-component\n\nA react component that allows lazy components to load once they are in viewpoint. It uses the\n[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Once a component is triggered to load, it will stay loaded (does not unload).\n\n\n[![Edit use-intersection-observer example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/54r7k92m04?fontsize=14)\n\n- [Motivation](#motivation)\n- [Installation](#installation)\n- [API docs](#api)\n  - [Return value](#wip)\n- [Example usage](#example-usage)\n\n## Motivation\n\nOften for large pages it would be ideal to not load components below the fold to improve performance.\n\n## Installation\n\n`npm install react-lazy-load-component`\n\nPlease note that this hook declares `react` and as _peer dependency_. Therefore, you must have\n`react` installed to use this package.\n\n**Note**: This hook relies on\n[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\nand hence if you want to use it in a browser that doesn't support it, the onus of shipping the\npolyfill is on the developer.\n\n## Example usage\n\nA CRA based example app (which is also used in the test suite) can be found under\n[examples/cra](examples/cra). Inline examples showcasing use-cases are below.\n\n### Example 1: Element with its parent document as viewport\n\nAs soon as at least 1px of the child element is visible in the parent document viewport,\n`isInViewport` evaluates to true.\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport LazyLoadComp from 'react-lazy-load-component'\n\nconst MyBigComponent = React.lazy( () =\u003e import('./MyBigComponent')); // your component to load\n\nexport default function SimpleElement() {\n  return (\n    \u003cLazyLoadComp fallback={\u003ch1\u003eloading\u003c/h1\u003e} width=\"300\" height=\"300\"\u003e\n      \u003cMyBigComponent/\u003e\n    \u003c/LazyLoadComp\u003e\n  )\n}\n```\n\n## API\n\n### react-lazy-load-component props\n\n```typescript\ninterface IProps {\n  width?: number; // optional: set the height of the placeholder space. Default: 400\n  height?: number; // optional: set the width of the placeholder space. Default: 300\n  fallback?: FallbackType; // optional:  set a fallback component while loading. Default: null (nothing)\n  threshold?: number; // optional: the percentage of the component in-viewpoint to start loading process. Default: 0.1%\n  onVisibleChange?: (visible:boolean)=\u003evoid; // optional: callback on visibility change for custom logic\n  children?: React.ReactNode; // your React.lazy-ified component\n}\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadbox%2Freact-lazy-load-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjadbox%2Freact-lazy-load-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadbox%2Freact-lazy-load-component/lists"}