{"id":16554212,"url":"https://github.com/jmestxr/react-infinite-scroll-loop","last_synced_at":"2026-05-09T08:31:30.882Z","repository":{"id":153376093,"uuid":"573772553","full_name":"jmestxr/react-infinite-scroll-loop","owner":"jmestxr","description":"React component that supports infinite scrolling of finite number of elements.","archived":false,"fork":false,"pushed_at":"2023-01-14T18:14:26.000Z","size":1313,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T19:44:47.872Z","etag":null,"topics":["infinite-scrolling","react","ui-component"],"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/jmestxr.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-12-03T11:41:06.000Z","updated_at":"2023-01-30T03:37:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"d16f6080-c112-4aad-9bfe-d8c58754709c","html_url":"https://github.com/jmestxr/react-infinite-scroll-loop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jmestxr/react-infinite-scroll-loop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmestxr%2Freact-infinite-scroll-loop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmestxr%2Freact-infinite-scroll-loop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmestxr%2Freact-infinite-scroll-loop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmestxr%2Freact-infinite-scroll-loop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmestxr","download_url":"https://codeload.github.com/jmestxr/react-infinite-scroll-loop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmestxr%2Freact-infinite-scroll-loop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32812224,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"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":["infinite-scrolling","react","ui-component"],"created_at":"2024-10-11T19:50:53.908Z","updated_at":"2026-05-09T08:31:30.863Z","avatar_url":"https://github.com/jmestxr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-infinite-scroll-loop\nReact component that supports infinite scrolling of finite number of elements.\n![demo3](https://user-images.githubusercontent.com/87931905/205445577-bf050286-d98e-45df-b688-7c1c1f088117.gif)\n\n## Installation\nTo download react-infinite-scroll-loop, run:\n```console\nnpm i reactjs-infinite-scroll-loop\n```\n\n## Usage\n```jsx\nimport { InfiniteScrollLoop, ContentWrapper } from 'reactjs-infinite-scroll-loop';\n\n\u003cInfiniteScrollLoop {/* props here */}\u003e\n    \u003cContentWrapper {/* props here */}\u003e\n        {/* Content element 1 */}\n    \u003c/ContentWrapper\u003e\n    \u003cContentWrapper {/* props here */}\u003e\n        {/* Content element 2 */}\n    \u003c/ContentWrapper\u003e\n    ...\n\u003c/InfiniteScrollLoop\u003e\n```\n\n## Animation\nCustom animation when a content element is selected can be implemented by adding the custom pseudo class `\u003cclassName\u003e__selected`. The animation\ntransition duration can be added to the target `\u003cclassName\u003e`.\n\n## Example\n![demo2](https://user-images.githubusercontent.com/87931905/205446156-7f40b41b-f600-403d-8e1e-0059f34600d5.gif)\n\nThe following code snippets reproduce the above gif:\n\n### React JS:\n```jsx\nconst Example = () =\u003e {\n    return (\n        \u003cdiv style={{ height:\"150px\", width:\"200px\" }}\u003e\n            \u003cInfiniteScrollLoop\u003e\n                {\n                    Array(6).fill(0).map((v, i) =\u003e {\n                        return \u003cContent key={i} id={`${i+1}`} number={i+1}/\u003e\n                    })\n                }\n            \u003c/InfiniteScrollLoop\u003e\n        \u003c/div\u003e\n    );\n};\n\ninterface ContentProps {\n    id: string;\n    number: number;\n}\n\nconst Content = ({ id, number }: ContentProps) =\u003e {\n    return (\n        \u003cContentWrapper height=\"30%\" width=\"100%\"\u003e\n            \u003cdiv id={id} className=\"container\" \u003e\n                \u003ch4 className=\"number\"\u003e{number}\u003c/h4\u003e\n            \u003c/div\u003e\n        \u003c/ContentWrapper\u003e\n    );\n};\n```\n\n### CSS:\n```css\n.container {\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n.number {\n    margin: 0;\n    opacity: 0.2;\n    font-size: 18px;\n    transition: 0.2s;\n}\n\n.number__selected {\n    opacity: 1;\n    font-size: 25px;\n}\n\n```\n\n## Docs\n\n### InfiniteScrollLoop Props\n| Name           | Type                        | Default         | Description                                                                                                                                                                                                                     |\n|----------------|-----------------------------|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `children`       | `React.ReactNode`             | None (required) | The content of the scroll container.[^1]                                                                                                                                                                                            |\n| `onSelect`       | `(selected: Element) =\u003e void` | `undefined`       | Executes a given JavaScript code on the selected element.                                                                                                                                                                       |\n| `verticalScroll` | `boolean`                     | `true`            | The direction of scroll. `true` for vertical and `false` for horizontal.[^2]                                                                                                                                                            |\n| `backup`         | `number`                      | `50`              | The number of backup content sets on the top and bottom. Increasing this number will increase the amount of scroll required to the end of the scroll container, but decreases performance as more content needs to be rendered. |\n\n### ContentWrapper Props\n| Name   | Type                                  | Default | Description                         |\n|--------|---------------------------------------|---------|-------------------------------------|\n| `height` | `string` (accept any CSS height values) | `‘auto’`  | The height of each content element. |\n| `width`  | `string` (accept any CSS width values)  | `‘auto’`  | The width of each content element.  |\n\n\n\n\n[^1]: Each content element must be contained in a ContentWrapper, or a custom parent wrapper class that consists of the scroll-snap-align property.\n[^2]: If scrollDirection is vertical, the height of scroll container must be larger than the height of each content element.\nIf scrollDirection is horizontal, the width of scroll container must be larger than the width of each content element.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmestxr%2Freact-infinite-scroll-loop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmestxr%2Freact-infinite-scroll-loop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmestxr%2Freact-infinite-scroll-loop/lists"}