{"id":21502477,"url":"https://github.com/tzachbon/react-intersection-loader","last_synced_at":"2026-02-27T18:49:19.128Z","repository":{"id":37100194,"uuid":"486767497","full_name":"tzachbon/react-intersection-loader","owner":"tzachbon","description":"Lazy load your components only when they're visible.","archived":false,"fork":false,"pushed_at":"2024-07-23T17:43:40.000Z","size":37498,"stargazers_count":4,"open_issues_count":10,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-10T11:57:22.971Z","etag":null,"topics":["intersection-observer","javascript","lazy-loading","lazyload","loadable-components","loader","nextjs","react","ssr","typescript","webpack"],"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/tzachbon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"patreon":"tzachbon"}},"created_at":"2022-04-28T22:36:08.000Z","updated_at":"2024-08-10T11:57:22.972Z","dependencies_parsed_at":"2024-05-06T18:54:22.669Z","dependency_job_id":null,"html_url":"https://github.com/tzachbon/react-intersection-loader","commit_stats":{"total_commits":116,"total_committers":2,"mean_commits":58.0,"dds":0.5,"last_synced_commit":"0fe1b6c0b8765ce9813f0ab25f851044ad4b3f77"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Freact-intersection-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Freact-intersection-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Freact-intersection-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzachbon%2Freact-intersection-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tzachbon","download_url":"https://codeload.github.com/tzachbon/react-intersection-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226077475,"owners_count":17570164,"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":["intersection-observer","javascript","lazy-loading","lazyload","loadable-components","loader","nextjs","react","ssr","typescript","webpack"],"created_at":"2024-11-23T18:15:06.530Z","updated_at":"2026-02-27T18:49:14.103Z","avatar_url":"https://github.com/tzachbon.png","language":"TypeScript","readme":"# React Intersection Loader\n\nLazy load your components only when they're visible.\n\n[![release](https://badgen.net/github/release/tzachbon/react-intersection-loader)](https://github.com/tzachbon/react-intersection-loader/releases)\n[![checks](https://badgen.net/github/checks/tzachbon/react-intersection-loader)](https://github.com/tzachbon/react-intersection-loader/actions)\n[![version](https://badgen.net/npm/v/react-intersection-loader)](https://www.npmjs.com/package/react-intersection-loader)\n\n![react-intersection-loader-demo](https://github.com/tzachbon/react-intersection-loader/blob/master/react-intersection-loader.gif?raw=true)\n\n```tsx\nimport { intersectionLoader } from 'react-intersection-loader';\n\n// This will be imported (lazy loaded) only when the user is about to see it.\nconst MyComponent = intersectionLoader(() =\u003e import('./MyComponent'));\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\n        style={{\n          width: '100vw',\n          height: '100vh',\n        }}\n      \u003e\n        \u003ch1\u003eI am a viewport size\u003c/h1\u003e\n      \u003c/div\u003e\n      \u003cMyComponent /\u003e\n    \u003c/div\u003e\n  );\n}\n\n```\n\n### Support\n\nSince this uses react, support verity of use cases is a most.\n#### React\n\nCurrently only supported with hooks, react `\u003e=16.8.0`\n\n#### SSR (Server-side rendering)\n\nFull support of SSR and hydration!\n\n## Examples\n\nTesting is a top priority. Therefore I created fixtures with various use-cases of projects that use this library.\nYou can check it out [here](./packages/react-intersection-loader/test/fixtures/).\\\n\\\nI build the fixtures using [webpack](https://webpack.js.org/), serve them and test them with [playwright](https://playwright.dev/).\n\n\n\n## Installation\n\n```sh\nnpm i react-intersection-loader\n```\nor\n\n```sh\nyarn add react-intersection-loader\n```\n","funding_links":["https://patreon.com/tzachbon"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzachbon%2Freact-intersection-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftzachbon%2Freact-intersection-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzachbon%2Freact-intersection-loader/lists"}