{"_id":"@amirkzm/react-infinite-scroll","_rev":"1-8e03217de6cbbecd68c430fbd427cb08","name":"@amirkzm/react-infinite-scroll","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@amirkzm/react-infinite-scroll","version":"1.0.1","author":{"name":"Amir Kazemi"},"license":"MIT","publishConfig":{"registry":"https://npm.pkg.github.com/amir253700"},"scripts":{"rollup":"rollup -c --bundleConfigAsCjs"},"devDependencies":{"@rollup/plugin-commonjs":"^23.0.5","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.0","@rollup/plugin-typescript":"^10.0.1","@types/react":"^18.0.26","@types/react-window":"^1.8.5","rollup":"^3.7.4","rollup-plugin-dts":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"react":"^18.0.0 || ^17.0.0"},"dependencies":{"react-window":"^1.8.8"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","gitHead":"7de818a7076ad88bb2d09cf1eb29bd5c9f0df9cf","_id":"@amirkzm/react-infinite-scroll@1.0.1","_nodeVersion":"16.18.1","_npmVersion":"8.13.2","dist":{"integrity":"sha512-capJvfGDkz6mhzniVdJrhoxM8ZquYgK8fksmU4yC44wNfeTIV71oUt0wDl4MIEfKAsM6XoazlVDo19tsyoQX9A==","shasum":"f7062945a90730d1f413f79730056cbf51d2d7f4","tarball":"https://registry.npmjs.org/@amirkzm/react-infinite-scroll/-/react-infinite-scroll-1.0.1.tgz","fileCount":16,"unpackedSize":30061,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGf0gjx2VKGg8O0heK6jxWahwUfXk4GHRfuv6uozCJJKAiAzB5sDBAVBem1XSMkItx4OWiHDwXYlQ7lgRZRgoj1Yhw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnIZ4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCRw/+Jjoho6knbqwFR525woJ1Iw3z7S7HSwy98DaqOn/YoBP8CmAB\r\nhzqBaUXmr9WrapkqgfwdIYsCj1jiefVbclfjiB6SR4aMBxgdp/PBze0Al61Z\r\nOo5ozGvbrf1tcBO89gpNuSCa9q8fWgEJuFAIcVblCSaOPdJu4Dwxv1vIPX/p\r\nABodEJvn4MP0RmPBHUidxevTMWXeoH1G2ahZw+yrZs8t9dd0Y0AUBQtrxzvA\r\nUYzjFWPQlzfGJMpXd+PmEzAgWnTwN3rfhKgbhNZCVCNVo46/mAGncga58ylf\r\n9gj8SK+jYGl3QyZlFJ69hT0ybuXMbVcHCA/jQfEffjZooc80F1CoeIgQowDF\r\nl8Hb3jXNB7436+9D7HUMDKZuC3MlyjAevpoJqadoNsgpV/qOQdlWQmW58D+y\r\nFKfZrKXPovnoCz/BWJcpbayTByeEgTAEc7a5eAcT35p2WOF6ZSV3yAPxBR9a\r\nWpEFNDrVinwdRtQs6Thkj4Skj8CbTSu2iAat2L8jl/pRbWrEuB5bbJT66IvP\r\n5oMa4VbSKeHNuIxF3o8CH/dWV4Zw4rWgv3x02/oJBIOn5umFd+8bzA0RPQ0D\r\nt+zhPVinXHo7dDGYTAjN9V3N0P0WIf6D/Sc4v4ILkPIphCltBCF+0ezL3uCY\r\nVDzDmM1yhoioj+Z1putrysJMjWNxc7sqHB4=\r\n=0lHA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"amirkzm","email":"amir.kzm@protonmail.com"},"directories":{},"maintainers":[{"name":"amirkzm","email":"amir.kzm@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-infinite-scroll_1.0.1_1671202424257_0.6589323445856987"},"_hasShrinkwrap":false},"1.0.3":{"name":"@amirkzm/react-infinite-scroll","version":"1.0.3","author":{"name":"Amir Kazemi"},"license":"MIT","publishConfig":{"registry":"https://npm.pkg.github.com/amirkzm"},"scripts":{"rollup":"rollup -c --bundleConfigAsCjs"},"keywords":["reactScroll","infiniteScroll","react-Window","react","scroller","react-component"],"devDependencies":{"@rollup/plugin-commonjs":"^23.0.5","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.0","@rollup/plugin-typescript":"^10.0.1","@types/react":"^18.0.26","@types/react-window":"^1.8.5","rollup":"^3.7.4","rollup-plugin-dts":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"react":"^18.0.0 || ^17.0.0"},"dependencies":{"@amirkzm/use-conditional-effect":"^1.0.0","react-window":"^1.8.8"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","gitHead":"ad9b231fc19d8e057623c6d3002f30816049bf41","description":"### on npm (https://www.npmjs.com/package/@amirkzm/react-infinite-scroll)","_id":"@amirkzm/react-infinite-scroll@1.0.3","_nodeVersion":"16.18.1","_npmVersion":"8.13.2","dist":{"integrity":"sha512-7dLHzQF5OObPZPdm4+h22g73lK50E3xoDyOLEoHf8E8g00Nhqq/YGNFgcKdNheem3wiPEK726S3h6dkkO5wNjg==","shasum":"1dca6308c9244601c0424c2db99c11efc05776d7","tarball":"https://registry.npmjs.org/@amirkzm/react-infinite-scroll/-/react-infinite-scroll-1.0.3.tgz","fileCount":17,"unpackedSize":36719,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWk32/EfWjlCxQJo5oT9cbSHVF/v1dFhn/Rr69c4AkKAiEA3Fj8KOGTdqtjCemJuU9Dgk+k2Gb0ofQIYPbifSZpMMo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnUxbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUjg/+LtCMPtdIkg7GuN3FrkpRWdz4dGCDO7OOQOdGSNi09dYJECPH\r\niuhAwnAf6zZifuwvEKUXodVgs9YFgQ73QlzQjRxrz3UoAW7VcYDUcXZtUI5v\r\nB0LQ9pJpRhZfKTVVKHovcrKVB60sWnnfywD9RC3l8eAaYgXNc/1wPlK+G9mV\r\ndWUCEF6l6r0l++2s/L/f69tC+DaxTkoegzuHLtKDkSNDXBBScKcL1LvfSUUY\r\nLx3EtlBMq7QnhQPLUdmXacGQFNbAb2bGqlpH+9N5TINISIGNpl0Wg2yjgV8v\r\ncgjjuajWVOzGAS//GkM2223pXvXt/ODIRUjjKOsRPj1sEFIJxrBjypSjVRdi\r\n40nsXfY/YRgzor44gQSyW7tzKSJUZxLb6axROAaXbZ/Awwkv8iwYD/tCphG0\r\naL19bsphJ8uIdYOy+g//xT3l4t+x168BusLKpgOsGMVJmvPR7t9+oL2qp34l\r\nsNgT4CTxHB9HsTNb9VPvrd6XaN+ZEfJoLxts3YduF6TPHvDW9c5vUcgO0uVd\r\nvAvSfd+0gytPwBgau+M/J8BLukW3FgW0Xit/whWfqnutj9931KaHIhb17sXG\r\ncz4oZijnKJiSASnJ4wf6VNRLHMXc+REjRklMRBYr4zpDjvAB0cYVxsI94bjA\r\nlsu51TOVpkPeX1eeh0pEV2uU7omz/jxzwgY=\r\n=qrbS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"amirkzm","email":"amir.kzm@protonmail.com"},"directories":{},"maintainers":[{"name":"amirkzm","email":"amir.kzm@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-infinite-scroll_1.0.3_1671253083726_0.9912557759659515"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-16T14:53:44.191Z","1.0.1":"2022-12-16T14:53:44.411Z","modified":"2022-12-17T04:58:03.998Z","1.0.3":"2022-12-17T04:58:03.908Z"},"maintainers":[{"name":"amirkzm","email":"amir.kzm@protonmail.com"}],"author":{"name":"Amir Kazemi"},"license":"MIT","readme":"# react-infinite-scroll\n\n### on npm (https://www.npmjs.com/package/@amirkzm/react-infinite-scroll)\n\n# About\n\nreact-infinite-scroll is a package that provides smooth scrooling on a long list of items when items need to be load from a server on the fly. It uses react-window library under the hood.\n\n## Quick Start\n\nnpm install @amirkzm/react-infinite-scroll
\nOr by yarn:
\nyarn add @amirkzm/react-infinite-scroll\n\n```typescript\n {//generate array if not} }\n style={{ backgroundColor: \"red\" }}\n width={400}\n height={300}\n itemSize={40}\n itemCount={200}\n />\n```\n\n## Table of Content\n\n1. [The problem ](#problem)\n2. [Solution ](#solution)\n3. [Usage ](#usage)\n4. [Props ](#props)\n5. [License ](#license)\n\n### Problem\n\nSuppose that we have a long list of item to display and server uses pagination to handle that long list of items. We want to load and show all those items in a smooth way as user scroll the page.\n\n### Solution\n\nreact-infinite-scroll helps us to fetch and show new data as user scroll down.
\n![](https://github.com/amir253700/react-infinite-scroll/blob/main/screen.gif)\n\n### Usage\n\nhere is a brief code sample for solving the mentioned problem above:\n\n```typescript\nimport {InfiniteLoader} from \"@amirkzm/react-infinite-scroll;\n\ninterface ItemProps {\n data: any[];\n index: any;\n style: any;\n}\n\nconst addressGenerator = (page: number): string => {\n return someUrl;\n};\n\nconst dataExtractor = (response: any) => {};\n\nfunction someComponent() {\n return (\n
\n {//generate array if not} }\n style={{ backgroundColor: \"red\" }}\n width={400}\n height={300}\n itemSize={40}\n itemCount={500}\n loadingElement={

Loading...

}\n />\n
\n );\n}\n\nconst listItem = ({ data, index, style }: ItemProps): JSX.Element => {\n return (\n
\n {data[index].id} {data[index].name}\n
\n );\n};\n```\n\n### Props\n\n| Props | Types | Description |\n| ---------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| renderFunction | (data:any, index:number, style:any) => JSX.Element | React component responsible for rendering the individual item specified by an index prop. This component also receives style props(used for positioning) and a data prop. |\n| addressGenerator | (pageNumber:number) => string | A function that recieves page number and generate the address of that page number to fetch data from. |\n| dataExtractor | (response:any) => any[] | An optional function that convert the desired result from server to an array. if server response is an array by itself leave we don't need to pass this function. |\n| loadingElement | ReactNode | An Optional ReactNode element if we want to show user as loading |\n| errorElement | ReactNode | An Optional ReactNode element if we want to show user as error |\n| itemCount | number or (response:any) => number | Total number of items we want to render. It can be a number or a function that recieve the response of the server and return the total number of elements in case server returns it. |\n| width | number | Specify the width of the list. It can be a number or string |\n| itemSize | number | Size of a item in the direction being windowed. For vertical lists, this is the row height. For horizontal lists, this is the column width. |\n\nYou can also pass all the props of the react-window package props on their [documents](https://react-window.vercel.app/#/api/FixedSizeList).
\n\n### license\n\nMIT\n","readmeFilename":"README.md","description":"### on npm (https://www.npmjs.com/package/@amirkzm/react-infinite-scroll)","keywords":["reactScroll","infiniteScroll","react-Window","react","scroller","react-component"]}