{"id":23919204,"url":"https://github.com/eberhara/react-bidirectional-infinite-scroll","last_synced_at":"2025-04-11T20:33:08.365Z","repository":{"id":45817411,"uuid":"83830870","full_name":"eberhara/react-bidirectional-infinite-scroll","owner":"eberhara","description":"Bidirectional infinite scroll written using react","archived":false,"fork":false,"pushed_at":"2021-07-22T04:20:40.000Z","size":1499,"stargazers_count":37,"open_issues_count":6,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T18:10:05.780Z","etag":null,"topics":["bidirectional","infinite-lists","infinite-scroll","react","reactjs"],"latest_commit_sha":null,"homepage":"https://eberhara.github.io/react-bidirectional-infinite-scroll/","language":"JavaScript","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/eberhara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-03T18:55:10.000Z","updated_at":"2025-04-02T01:28:08.000Z","dependencies_parsed_at":"2022-09-09T15:10:28.988Z","dependency_job_id":null,"html_url":"https://github.com/eberhara/react-bidirectional-infinite-scroll","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/eberhara%2Freact-bidirectional-infinite-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eberhara%2Freact-bidirectional-infinite-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eberhara%2Freact-bidirectional-infinite-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eberhara%2Freact-bidirectional-infinite-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eberhara","download_url":"https://codeload.github.com/eberhara/react-bidirectional-infinite-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248476484,"owners_count":21110291,"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":["bidirectional","infinite-lists","infinite-scroll","react","reactjs"],"created_at":"2025-01-05T14:30:17.211Z","updated_at":"2025-04-11T20:33:08.329Z","avatar_url":"https://github.com/eberhara.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-bidirectional-infinite-scroll\n\n[![Travis][build-badge]][build]\n[![node version][node-badge]][npm]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n\n**Bidirectional infinite scroll written using react**\n\n[build-badge]: https://img.shields.io/travis/eberhara/react-bidirectional-infinite-scroll/master.png?style=flat-square\n[build]: https://travis-ci.org/eberhara/react-bidirectional-infinite-scroll\n\n[npm-badge]: https://img.shields.io/npm/v/react-bidirectional-infinite-scroll.png?style=flat-square\n[npm]: https://www.npmjs.org/package/react-bidirectional-infinite-scroll\n[node-badge]: https://img.shields.io/node/v/react-bidirectional-infinite-scroll.svg?style=flat-square\n\n[coveralls-badge]: https://img.shields.io/coveralls/eberhara/react-bidirectional-infinite-scroll/master.png?style=flat-square\n[coveralls]: https://coveralls.io/github/eberhara/react-bidirectional-infinite-scroll\n\nThis is a react library that handles infinite scrolling in two directions at the same time: UP/DOWN or LEFT/RIGHT.\n\nSee it working at [eberhara.github.io/react-bidirectional-infinite-scroll/](https://eberhara.github.io/react-bidirectional-infinite-scroll/).\n\n\n## Installation\n\n```bash\nnpm i --save react-bidirectional-infinite-scroll\n```\n\n## Usage\n\n```jsx\nimport InfiniteScroll from 'react-bidirectional-infinite-scroll'\n\n...\n\nrender() {\n  return (\n    // Vertical infinite scroll\n    \u003cInfiniteScroll onReachBottom={f =\u003e f} onReachTop={f =\u003e f} \u003e\n      // ... here goes your infinite list\n    \u003c/InfiniteScroll\u003e\n\n    // Horizontal infinite scroll\n    \u003cInfiniteScroll onReachLeft={f =\u003e f} onReachRight={f =\u003e f} horizontal\u003e\n      // ... here goes your infinite list\n    \u003c/InfiniteScroll\u003e\n  )\n}\n```\n\n\n## More examples\n\n```jsx\nimport InfiniteScroll from 'react-bidirectional-infinite-scroll'\n\n...\n\nhandleHorizontalScroll = (position, previousPosition) =\u003e {\n  const diffScroll = position - previousPosition\n  const direction = diffScroll \u003e 0\n    ? 'right'\n    : 'left'\n\n  console.log(`Scroll ${direction} to ${position}`)\n}\n\nhandleVerticalScroll = (position, previousPosition) =\u003e {\n  const diffScroll = position - previousPosition\n  const direction = diffScroll \u003e 0\n    ? 'down'\n    : 'up'\n\n  console.log(`Scroll ${direction} to ${position}`)\n}\n\nrender() {\n  return (\n    // Vertical scroll verifying scroll direction\n    \u003cInfiniteScroll onScroll={this.handleVerticalScroll}\u003e\n      // ... here goes your infinite list\n    \u003c/InfiniteScroll\u003e\n\n    // Horizontal scroll verifying scroll direction\n    \u003cInfiniteScroll onScroll={this.handleHorizontalScroll} horizontal\u003e\n      // ... here goes your infinite list\n    \u003c/InfiniteScroll\u003e\n\n    // Scroll overwriting scroll position (px)\n    \u003cInfiniteScroll position={100}\u003e\n      // ... here goes your infinite list\n    \u003c/InfiniteScroll\u003e\n  )\n}\n```\n\nTake a look at [examples folder](./demo/src/examples) for a complete example.\n\n## Contributing\n\nCheck [CONTRIBUTING](./CONTRIBUTING.md) for guidance.\n\n## License\n\nMIT License\n\nCopyright (c) 2017 Andre Eberhardt\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feberhara%2Freact-bidirectional-infinite-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feberhara%2Freact-bidirectional-infinite-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feberhara%2Freact-bidirectional-infinite-scroll/lists"}