{"id":21822097,"url":"https://github.com/stevensacks/react-smart-scroll","last_synced_at":"2025-04-14T03:52:24.307Z","repository":{"id":34888228,"uuid":"187262308","full_name":"stevensacks/react-smart-scroll","owner":"stevensacks","description":"Efficient rendering of long lists in React","archived":false,"fork":false,"pushed_at":"2024-03-28T22:09:34.000Z","size":6473,"stargazers_count":30,"open_issues_count":9,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T19:56:02.679Z","etag":null,"topics":["react","scroll","scrollable","scrolling","virtualized","virtualscroll"],"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/stevensacks.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-17T18:17:37.000Z","updated_at":"2025-03-30T00:45:41.000Z","dependencies_parsed_at":"2023-01-15T10:01:08.196Z","dependency_job_id":"42018bdb-a366-4ab3-8059-89a05e210ba8","html_url":"https://github.com/stevensacks/react-smart-scroll","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Freact-smart-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Freact-smart-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Freact-smart-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Freact-smart-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevensacks","download_url":"https://codeload.github.com/stevensacks/react-smart-scroll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819357,"owners_count":21166474,"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":["react","scroll","scrollable","scrolling","virtualized","virtualscroll"],"created_at":"2024-11-27T17:13:04.096Z","updated_at":"2025-04-14T03:52:24.287Z","avatar_url":"https://github.com/stevensacks.png","language":"TypeScript","readme":"# react-smart-scroll\n\n[![npm version](https://badge.fury.io/js/react-smart-scroll.svg)](//npmjs.com/package/react-smart-scroll)\n\nReactSmartScroll is a lightweight, high-performance, easy-to-use way to render long lists efficiently in React. It only renders the visible rows, with a few buffer rows above and below.\n\nReactSmartScroll is (mostly) un-opinionated, with minimum configuration. It has automatic support for variable height rows, even if they change height at runtime due to resizing, expanding, etc.\n\n### Installation\n```\n// npm\nnpm i -S react-smart-scroll\n\n// yarn\nyarn add react-smart-scroll\n```\n\n### Super Simple Sample:\n```javascript\nimport ReactSmartScroll from 'react-smart-scroll';\n\nconst data = [\n    {id: 1, text: 'Hello'},\n    {id: 2, text: 'World'},\n];\n\nconst TestRow = ({data, rowRef}) =\u003e (\n    \u003cdiv ref={rowRef}\u003e\n        {data.text}\n    \u003c/div\u003e\n);\n\nexport default () =\u003e (\n    \u003cReactSmartScroll data={data} row={TestRow} /\u003e\n);\n```\n\n### TypeScript\nTyping for your row components is included as a named export.\n```typescript jsx\nimport {ReactSmartScrollRow} from 'react-smart-scroll';\n\nconst TypedTestRow: ReactSmartScrollRow = ({data, rowRef}) =\u003e (\n    \u003cdiv ref={rowRef}\u003e\n        {data.text}\n    \u003c/div\u003e\n);\n```\n\n### Working Demo with variable height rows:\n* [JavaScript Demo](https://codesandbox.io/s/react-smart-scroll-demo-3x1ym)\n* [TypeScript Demo](https://codesandbox.io/s/react-smart-scroll-ts-demo-9p3kz)\n\n**This component uses React Hooks, so it requires React 16.8.x or above.**\n\n## How To Use\nReactSmartScroll is designed to be simple to use. You can check the `demo` folder for an example, as well.\n\nAt its most basic, you pass an array of data and a row component to render the items in the array.\n\n#### Props\n- `className` - A css className that will be applied to the component.\n- `data` - An array of items to be passed to your row component.\n- `overflow` - You can set this to `auto` or `scroll` (\"auto\" is the default).\n- `row` - Your row component.\n- `rowHeight` - Starting row height (100 by default) - it starts with this as an estimate for all rows, and then measures and caches the actual height of each row is as you scroll.\n- `startAt` - You can pass an index to start the list at (0 by default).\n- `style` - A style object applied to the component if you prefer using inline styling instead of css.\n- `...rowProps` - Any additional props you pass will be applied to your row components, for example `onClick`.\n\n\nAll of the props are optional. If you don't provide any data or a row component, it won't render anything, but it won't cause any errors, either.\n\nYou need to apply `height`, either in the css class or the style object. You can use a specific height, or `calc()`.\n\nDue to a CSS limitation with how overflow works with padding, `height: 100%` does not work.\n\nThe `overflow` default value of `auto` is applied via `style`. If you want to use a css class to control it, you need to pass `null`, `undefined`, or an empty string to `overflow`. If you use a style object, you can set it there, since the default `auto` is applied before your style object and thus can be overwritten that way.\n\n```javascript\nimport ReactSmartScroll, {ReactSmartScrollRow} from 'react-smart-scroll';\n\n\u003cReactSmartScroll \n    className=\"demo-smart-scroll\" \n    data={data} \n    overflow=\"scroll\"\n    row={TestRow}\n    startAt={5}\n    onClick={() =\u003e console.log('Hello!')} // passed to row components\n    label=\"My text is: \" // passed to row components\n/\u003e\n\nconst TestRow: ReactSmartScrollRow = ({data, height, label, onClick, rowIndex, rowRef}) =\u003e (\n    \u003cdiv ref={rowRef} className=\"test-row\" onClick={() =\u003e onClick(rowIndex)}\u003e\n        \u003cstrong\u003e[{data.id}]\u003c/strong\u003e: {height}px\u003cbr/\u003e\n        \u003clabel\u003e{label}\u003c/label\u003e:\u003cp\u003e{data.text}\u003c/p\u003e\n    \u003c/div\u003e\n);\n```\n\nThe `data` array can be made up of objects or strings. ReactSmartScroll passes the items in the array directly to your row component so you have complete freedom in how the rows render. If you pass an object with an `id` property, it will use the `id` as the key for each row, which can be more efficient than using the row index.\n\nYour row component receives the following props:\n- `data` - The item in the data array that corresponds to this row.\n- `height` - The current measured height of the row. It's provided for debugging or if you have a use for it.\n- `rowIndex` - The index of the item in the data array. Also provided for debugging, use if you like.\n- `rowRef` - *required* You need to include `ref={rowRef}` prop on your row component's container element.\n- `...rowProps` - Any additional props you passed to the ReactSmartScroll component will be available on every row. \n\n## How It Works\nReactSmartScroll renders enough rows to fill the visible space of the scroll area, plus an extra one above and below. It measures the height of each of the visible row and caches that height as you scroll (or resize) so that the next render of the same row is more efficient. It simulates the total height of all the items by adjusting the padding top and bottom of the div that contains the rows as you scroll.\n\nUnlike other virtual scrolling components/libraries, there are no unnecessary wrapper divs for your rows, it doesn't use absolute positioning, and doesn't require any polyfills.\n \n#### Firefox Note\nThe latest version of Firefox doesn't seem to keep up with React's rendering speed with `useLayoutEffect()` or `useEffect()`, so if you grab the scrollbar and scroll up and down really fast, you'll see blank space momentarily. Other browsers don't appear to have this problem. Using the mouse wheel to scroll looks good in all browsers.\n\n### rowRef Note\n\u003eWhy does React Smart Scroll pass `rowRef` instead of just passing `ref`?\n\nThis removes the burden of having to wrap functional row components with `React.forwardRef()`. \n\nIMO, it's easier and more flexible for you to use `rowRef`.\n\n## Closing Note\nI hope you enjoy using this component as much as I enjoyed making it!\n\nFollow me:\n- twitter: https://twitter.com/stevensacks\n- github: https://github.com/stevensacks\n- gitlab: https://gitlab.com/stevensacks\n- linkedin: https://www.linkedin.com/in/stevensacks\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/npm-package\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevensacks%2Freact-smart-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevensacks%2Freact-smart-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevensacks%2Freact-smart-scroll/lists"}