{"id":15463002,"url":"https://github.com/sohamsshah/sodium-infinite-scroller","last_synced_at":"2025-04-22T10:42:57.721Z","repository":{"id":46678155,"uuid":"404444419","full_name":"sohamsshah/sodium-infinite-scroller","owner":"sohamsshah","description":"A simple, zero-dependency and awesome React Infinite ♾ Scrolling Component based on Intersection Observer API. Powered by Vite.js ⚡ ","archived":false,"fork":false,"pushed_at":"2021-09-30T15:37:57.000Z","size":80,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T04:51:18.187Z","etag":null,"topics":["infinite-scroll","intersection-observer","npm-package","react-component","vitejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/sodium-infinite-scroller","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/sohamsshah.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-08T17:53:42.000Z","updated_at":"2023-01-10T02:55:31.000Z","dependencies_parsed_at":"2022-09-12T03:11:07.400Z","dependency_job_id":null,"html_url":"https://github.com/sohamsshah/sodium-infinite-scroller","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohamsshah%2Fsodium-infinite-scroller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohamsshah%2Fsodium-infinite-scroller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohamsshah%2Fsodium-infinite-scroller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohamsshah%2Fsodium-infinite-scroller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohamsshah","download_url":"https://codeload.github.com/sohamsshah/sodium-infinite-scroller/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241647174,"owners_count":19996695,"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":["infinite-scroll","intersection-observer","npm-package","react-component","vitejs"],"created_at":"2024-10-02T00:06:35.234Z","updated_at":"2025-03-03T10:31:35.231Z","avatar_url":"https://github.com/sohamsshah.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg width=\"150\" src=\"https://i.imgur.com/BaN22lK.png\" alt=\"sodium infinite scroller Logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\u003cb\u003eSodium Infinite Scroller ♾ \u003c/b\u003e\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller/blob/main/LICENSE\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/license/sohamsshah/pixelsHash?style=flat-square\" alt=\"sodium licence\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller/fork\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/forks/sohamsshah/sodium-infinite-scroller?style=flat-square\" alt=\"sodium-infinite-scroller forks\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller/stargazers\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/stars/sohamsshah/sodium-infinite-scroller?style=flat-square\" alt=\"sodium-infinite-scroller stars\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller/issues\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/issues/sohamsshah/sodium-infinite-scroller?style=flat-square\" alt=\"sodium-infinite-scroller issues\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller/pulls\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/issues-pr/sohamsshah/sodium-infinite-scroller?style=flat-square\" alt=\"sodium-infinite-scroller pull-requests\"/\u003e\n\u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/sodium-infinite-scroller\" target=\"blank\"\u003esodium-infinite-scroller\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller/issues/new/choose\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/sohamsshah/sodium-infinite-scroller/issues/new/choose\"\u003eRequest Feature\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nA simple, zero-dependency and awesome React Infinite ♾ Scrolling Component based on Intersection Observer API. Works perfectly fine with almost null-hassle and lets you implement infinite scrolling in your web app on the fly! Powered by Vite.js ⚡\n\n\u003c!-- ## **🚀 Demo**\n\n![image](https://user-images.githubusercontent.com/47717492/129268568-b11171ca-1132-4b39-b194-27004fd975c8.png) --\u003e\n\n## **⬇ Installation**\n\n```bash\n// using npm\nnpm i sodium-infinite-scroller\n\n//or you prefer yarn\nyarn add sodium-infinite-scroller\n\n```\n\n## **🏄‍♂️ Usage**\n\n### Importing the package\n\n```jsx\n// in ES6\nimport InfiniteScroll from \"sodium-infinite-scroller\";\n// or commonjs\nvar InfiniteScroll = require(\"sodium-infinite-scroller\");\n```\n\n### Using the Infinite Scroll Component\n\n```jsx\n\u003cInfiniteScroll\n  dataLength={images.length}\n  hasMore={hasMore}\n  loadMore={getMoreImages}\n  loader={\u003cLoader /\u003e}\n  threshold={VISIBILITY_THRESHOLD}\n\u003e\n  {contentToBeInfinitelyScrolled}\n\u003c/InfiniteScroll\u003e\n```\n\n### Prop Definition\n\n| prop       | type        | description                                                                                                                                                                                               |\n| ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| dataLength | number      | Denotes the length of the data which is loaded on every call loadMore() function call.                                                                                                                    |\n| hasMore    | bool        | Denotes if there is more data to be loaded.                                                                                                                                                               |\n| loadMore   | function    | Takes the function that is to be called to fetch more data for infinite scrolling.                                                                                                                        |\n| threshold  | number      | Denotes the visibility threshold value of the element that is being observed by the Intersection Observer API. \u003cbr\u003eThe Value is between 0 and 1; and it represents the percentage of the element visible. |\n| loader     | node        | Takes a Node Element(can be a simple HTML element node or even a React Component) to represent the loading state.                                                                                         |\n| endContent | node        | Takes a Node Element(can be a simple HTML element node or even a React Component) to show the end content when \u003cbr\u003edata is loaded.                                                                        |\n| children   | node (list) | The Data Items on while you want to enable infinite scrolling functionality.                                                                                                                              |\n\n## **🛠️ Spinning Up Development Environment**\n\n1. Clone the repository\n\n```bash\ngit clone https://github.com/sohamsshah/sodium-infinite-scroller.git\n```\n\n2. Change the working directory\n\n```bash\ncd sodium-infinite-scroller\n```\n\n3. Install dependencies\n\n```bash\nyarn\n```\n\n5. Test working of the package\n\n```bash\nyarn run dev\n```\n\nYou are all set! Open [localhost:3000](http://localhost:3000/) to see the app.\n\n6. Make changes and build the package\n\n```bash\nyarn build\n```\n\nCheck if the build is successful and raise a PR with the proposed changes.\n\n## **💖 We love Contributions**\n\n- **Sodium Infinite Scroller** is truly Open Source. Any sort of contribution to this project are highly appreciated. Create a branch, add commits, and [open a pull request](https://github.com/sohamsshah/sodium-infinite-scroller/compare).\n\n- Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to **Sodium Infinite Scroller**.\n\n## **🛡️ License**\n\nThis project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.\n\n---\n\n## **👨‍💻 Author**\n\n### 👤 Soham Shah\n\n- Twitter: [@sohamsshah\\_](https://twitter.com/sohamsshah_)\n- Github: [@sohamsshah](https://github.com/sohamsshah)\n- Hashnode: [@sohamsshah](https://hashnode.com/@sohamsshah)\n- LinkedIN: [@sohamshah456](https://www.linkedin.com/in/sohamshah456/)\n\n---\n\n\u003ch3 align=\"center\"\u003e\n\u003cb\u003eLiked this npm package?\n\nO Stargazer✨! Can you ⭐️ this too? \u003c/b\u003e\n\n\u003c/h3\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohamsshah%2Fsodium-infinite-scroller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohamsshah%2Fsodium-infinite-scroller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohamsshah%2Fsodium-infinite-scroller/lists"}