{"_id":"@bajakigabesz/react-virtuoso","_rev":"2-d4299c82fb53ac834e9a720ad9a3851c","name":"@bajakigabesz/react-virtuoso","dist-tags":{"latest":"4.6.5-development"},"versions":{"4.6.3-development":{"name":"@bajakigabesz/react-virtuoso","author":{"name":"Petyo Ivanov"},"sideEffects":false,"version":"4.6.3-development","homepage":"https://virtuoso.dev/","license":"MIT","source":"src/index.tsx","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","keywords":["react","reactjs","virtual","endless","load more","list","scrolling","infinite","virtualized","grid","feed","chat"],"scripts":{"build":"vite build","test":"vitest run","test:watch":"vitest watch","e2e":"playwright test","lint":"eslint src test e2e --ext .ts,.tsx","typecheck":"tsc --noEmit -p tsconfig.typecheck.json","dev":"LADLE=true ladle serve","prepare":"pnpm run build && husky install","semantic-release":"semantic-release","docs:start":"docusaurus start --config docusaurus/docusaurus.config.js","docs:build":"docusaurus build --config docusaurus/docusaurus.config.js","docs:deploy":"docusaurus deploy --config docusaurus/docusaurus.config.js"},"peerDependencies":{"react":">=16 || >=17 || >= 18","react-dom":">=16 || >=17 || >= 18"},"devDependencies":{"@codesandbox/sandpack-react":"^2.6.3","@codesandbox/sandpack-themes":"^2.0.21","@commitlint/cli":"^17.6.3","@commitlint/config-conventional":"^17.6.3","@docusaurus/core":"2.4.0","@docusaurus/module-type-aliases":"2.4.0","@docusaurus/plugin-google-gtag":"^2.4.0","@docusaurus/preset-classic":"2.4.0","@emotion/core":"^11.0.0","@emotion/styled":"^11.10.8","@faker-js/faker":"^7.6.0","@ladle/react":"^2.12.3","@mdx-js/react":"^1.6.22","@playwright/test":"^1.33.0","@testing-library/react":"^14.0.0","@types/jsdom":"^21.1.1","@types/lodash":"^4.14.194","@types/react":"^18.2.5","@types/react-beautiful-dnd":"^13.1.4","@types/react-dom":"^18.2.4","@types/react-router-dom":"^5.3.3","@typescript-eslint/eslint-plugin":"^5.59.2","@typescript-eslint/parser":"^5.59.2","@vitejs/plugin-react":"^4.0.0","clsx":"^1.2.1","docusaurus-plugin-typedoc":"^0.19.2","eslint":"^8.39.0","eslint-config-prettier":"^8.8.0","eslint-plugin-html":"^7.1.0","eslint-plugin-import":"^2.27.5","eslint-plugin-json":"^3.1.0","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^8.0.3","immer":"^10.0.1","jsdom":"^22.0.0","lodash":"^4.17.21","playwright":"^1.33.0","prettier":"^2.2.1","prism-react-renderer":"^1.3.5","react":"^18.2.0","react-beautiful-dnd":"^13.1.1","react-dom":"^18.2.0","react-router-dom":"^6.14.0","@tanstack/react-table":"^8.9.11","semantic-release":"^19.0.5","terser":"^5.17.1","tslib":"^2.5.0","typedoc":"^0.24.6","typedoc-plugin-markdown":"^3.15.3","typescript":"^5.0.4","vite":"^4.3.5","vite-plugin-dts":"^2.3.0","vitest":"^0.31.0"},"packageManager":"pnpm@8.3.0","engines":{"node":">=10"},"prettier":{"printWidth":140,"semi":false,"singleQuote":true,"trailingComma":"es5"},"repository":{"type":"git","url":"git+https://github.com/petyosi/react-virtuoso.git"},"_id":"@bajakigabesz/react-virtuoso@4.6.3-development","gitHead":"9d9c134f19efbcc03a74e7095b8c2eee5486d370","description":"<img src=\"https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png\" width=\"229\" />","bugs":{"url":"https://github.com/petyosi/react-virtuoso/issues"},"_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-yF7rs3E36H+r6H8F9CPua0pSxK7Fw1xLpQwnjcAgCSidYgvqEj6CcyQDah11l0Vh8oqsAcRzVblQ0BtdPtSyhA==","shasum":"cf13f765b61d30227bfb0e52331ed39fba1a2ff0","tarball":"https://registry.npmjs.org/@bajakigabesz/react-virtuoso/-/react-virtuoso-4.6.3-development.tgz","fileCount":6,"unpackedSize":251377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXS+eBjLNsGexfYIakzKnCuSEzoZwiFu1XOd3LguFlKAiAd7U+MSBTxHyUVbDuYB7zVMcH/0mur2SGpvZSNJtAXhg=="}]},"_npmUser":{"name":"bajakigabesz","email":"bajakigabesz@gmail.com"},"directories":{},"maintainers":[{"name":"bajakigabesz","email":"bajakigabesz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-virtuoso_4.6.3-development_1705582065619_0.5283522154443969"},"_hasShrinkwrap":false},"4.6.4-development":{"name":"@bajakigabesz/react-virtuoso","author":{"name":"Petyo Ivanov"},"sideEffects":false,"version":"4.6.4-development","homepage":"https://virtuoso.dev/","license":"MIT","source":"src/index.tsx","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","keywords":["react","reactjs","virtual","endless","load more","list","scrolling","infinite","virtualized","grid","feed","chat"],"scripts":{"build":"vite build","test":"vitest run","test:watch":"vitest watch","e2e":"playwright test","lint":"eslint src test e2e --ext .ts,.tsx","typecheck":"tsc --noEmit -p tsconfig.typecheck.json","dev":"LADLE=true ladle serve","prepare":"pnpm run build && husky install","semantic-release":"semantic-release","docs:start":"docusaurus start --config docusaurus/docusaurus.config.js","docs:build":"docusaurus build --config docusaurus/docusaurus.config.js","docs:deploy":"docusaurus deploy --config docusaurus/docusaurus.config.js"},"peerDependencies":{"react":">=16 || >=17 || >= 18","react-dom":">=16 || >=17 || >= 18"},"devDependencies":{"@codesandbox/sandpack-react":"^2.6.3","@codesandbox/sandpack-themes":"^2.0.21","@commitlint/cli":"^17.6.3","@commitlint/config-conventional":"^17.6.3","@docusaurus/core":"2.4.0","@docusaurus/module-type-aliases":"2.4.0","@docusaurus/plugin-google-gtag":"^2.4.0","@docusaurus/preset-classic":"2.4.0","@emotion/core":"^11.0.0","@emotion/styled":"^11.10.8","@faker-js/faker":"^7.6.0","@ladle/react":"^2.12.3","@mdx-js/react":"^1.6.22","@playwright/test":"^1.33.0","@testing-library/react":"^14.0.0","@types/jsdom":"^21.1.1","@types/lodash":"^4.14.194","@types/react":"^18.2.5","@types/react-beautiful-dnd":"^13.1.4","@types/react-dom":"^18.2.4","@types/react-router-dom":"^5.3.3","@typescript-eslint/eslint-plugin":"^5.59.2","@typescript-eslint/parser":"^5.59.2","@vitejs/plugin-react":"^4.0.0","clsx":"^1.2.1","docusaurus-plugin-typedoc":"^0.19.2","eslint":"^8.39.0","eslint-config-prettier":"^8.8.0","eslint-plugin-html":"^7.1.0","eslint-plugin-import":"^2.27.5","eslint-plugin-json":"^3.1.0","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^8.0.3","immer":"^10.0.1","jsdom":"^22.0.0","lodash":"^4.17.21","playwright":"^1.33.0","prettier":"^2.2.1","prism-react-renderer":"^1.3.5","react":"^18.2.0","react-beautiful-dnd":"^13.1.1","react-dom":"^18.2.0","react-router-dom":"^6.14.0","@tanstack/react-table":"^8.9.11","semantic-release":"^19.0.5","terser":"^5.17.1","tslib":"^2.5.0","typedoc":"^0.24.6","typedoc-plugin-markdown":"^3.15.3","typescript":"^5.0.4","vite":"^4.3.5","vite-plugin-dts":"^2.3.0","vitest":"^0.31.0"},"packageManager":"pnpm@8.3.0","engines":{"node":">=10"},"prettier":{"printWidth":140,"semi":false,"singleQuote":true,"trailingComma":"es5"},"repository":{"type":"git","url":"git+https://github.com/bajakigabesz/react-virtuoso.git"},"_id":"@bajakigabesz/react-virtuoso@4.6.4-development","gitHead":"4cdf6da206132d67926e38e23940391ba1487f5a","description":"<img src=\"https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png\" width=\"229\" />","bugs":{"url":"https://github.com/bajakigabesz/react-virtuoso/issues"},"_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-VJ4pS7tzVWdIhjp+6pGJN29Q374AeBfmL/kMMAUSOJ4wZ4YcbVtsbXYPYhpbt3uKZhuWHcPY+H2s7KxwA8J68w==","shasum":"8bb86dd979187928864249fcb14de0c0501afe51","tarball":"https://registry.npmjs.org/@bajakigabesz/react-virtuoso/-/react-virtuoso-4.6.4-development.tgz","fileCount":6,"unpackedSize":251405,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9RqVgnqOw0m3Njq4EeuiHPaM7+xnx2WtKz0SnM+E94AiAZxFabAa4PZHUPfTAX65yJwfoA4D7sXkZeIj5v0ohlKg=="}]},"_npmUser":{"name":"bajakigabesz","email":"bajakigabesz@gmail.com"},"directories":{},"maintainers":[{"name":"bajakigabesz","email":"bajakigabesz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-virtuoso_4.6.4-development_1705584129768_0.30968630586552925"},"_hasShrinkwrap":false},"4.6.5-development":{"name":"@bajakigabesz/react-virtuoso","author":{"name":"Petyo Ivanov"},"sideEffects":false,"version":"4.6.5-development","homepage":"https://virtuoso.dev/","license":"MIT","source":"src/index.tsx","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","keywords":["react","reactjs","virtual","endless","load more","list","scrolling","infinite","virtualized","grid","feed","chat"],"scripts":{"build":"vite build","test":"vitest run","test:watch":"vitest watch","e2e":"playwright test","lint":"eslint src test e2e --ext .ts,.tsx","typecheck":"tsc --noEmit -p tsconfig.typecheck.json","dev":"LADLE=true ladle serve","prepare":"pnpm run build && husky install","semantic-release":"semantic-release","docs:start":"docusaurus start --config docusaurus/docusaurus.config.js","docs:build":"docusaurus build --config docusaurus/docusaurus.config.js","docs:deploy":"docusaurus deploy --config docusaurus/docusaurus.config.js"},"peerDependencies":{"react":">=16 || >=17 || >= 18","react-dom":">=16 || >=17 || >= 18"},"devDependencies":{"@codesandbox/sandpack-react":"^2.6.3","@codesandbox/sandpack-themes":"^2.0.21","@commitlint/cli":"^17.6.3","@commitlint/config-conventional":"^17.6.3","@docusaurus/core":"2.4.0","@docusaurus/module-type-aliases":"2.4.0","@docusaurus/plugin-google-gtag":"^2.4.0","@docusaurus/preset-classic":"2.4.0","@emotion/core":"^11.0.0","@emotion/styled":"^11.10.8","@faker-js/faker":"^7.6.0","@ladle/react":"^2.12.3","@mdx-js/react":"^1.6.22","@playwright/test":"^1.33.0","@testing-library/react":"^14.0.0","@types/jsdom":"^21.1.1","@types/lodash":"^4.14.194","@types/react":"^18.2.5","@types/react-beautiful-dnd":"^13.1.4","@types/react-dom":"^18.2.4","@types/react-router-dom":"^5.3.3","@typescript-eslint/eslint-plugin":"^5.59.2","@typescript-eslint/parser":"^5.59.2","@vitejs/plugin-react":"^4.0.0","clsx":"^1.2.1","docusaurus-plugin-typedoc":"^0.19.2","eslint":"^8.39.0","eslint-config-prettier":"^8.8.0","eslint-plugin-html":"^7.1.0","eslint-plugin-import":"^2.27.5","eslint-plugin-json":"^3.1.0","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^8.0.3","immer":"^10.0.1","jsdom":"^22.0.0","lodash":"^4.17.21","playwright":"^1.33.0","prettier":"^2.2.1","prism-react-renderer":"^1.3.5","react":"^18.2.0","react-beautiful-dnd":"^13.1.1","react-dom":"^18.2.0","react-router-dom":"^6.14.0","@tanstack/react-table":"^8.9.11","semantic-release":"^19.0.5","terser":"^5.17.1","tslib":"^2.5.0","typedoc":"^0.24.6","typedoc-plugin-markdown":"^3.15.3","typescript":"^5.0.4","vite":"^4.3.5","vite-plugin-dts":"^2.3.0","vitest":"^0.31.0"},"packageManager":"pnpm@8.3.0","engines":{"node":">=10"},"prettier":{"printWidth":140,"semi":false,"singleQuote":true,"trailingComma":"es5"},"repository":{"type":"git","url":"git+https://github.com/bajakigabesz/react-virtuoso.git"},"_id":"@bajakigabesz/react-virtuoso@4.6.5-development","gitHead":"f1e48620b6fd1b3a80767d825d6f581c33ddaf13","description":"<img src=\"https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png\" width=\"229\" />","bugs":{"url":"https://github.com/bajakigabesz/react-virtuoso/issues"},"_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-0YlX46/PeZUnVn5u1PJmrR3w5ax7Tv2VwajYQdR6BmxOP9kMyQQlCAzMG98euMIkO/vcAQx9VM0UOJB8pnPX5g==","shasum":"0b31f48c06f8b9bee8fdb47ced7b74d6cae9a319","tarball":"https://registry.npmjs.org/@bajakigabesz/react-virtuoso/-/react-virtuoso-4.6.5-development.tgz","fileCount":6,"unpackedSize":251715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyyjdBD5Qo2ft+WWlMwOg6caosYa+gaQpQhXqfLeIa9AiArtMfbxwNx6mVgTv9lTTg5wB3W94m+NTC7bI58d/rdCQ=="}]},"_npmUser":{"name":"bajakigabesz","email":"bajakigabesz@gmail.com"},"directories":{},"maintainers":[{"name":"bajakigabesz","email":"bajakigabesz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-virtuoso_4.6.5-development_1705585301179_0.5995460532548857"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-18T12:47:45.523Z","4.6.3-development":"2024-01-18T12:47:45.763Z","modified":"2024-01-18T13:41:41.553Z","4.6.4-development":"2024-01-18T13:22:09.941Z","4.6.5-development":"2024-01-18T13:41:41.354Z"},"maintainers":[{"name":"bajakigabesz","email":"bajakigabesz@gmail.com"}],"description":"<img src=\"https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png\" width=\"229\" />","homepage":"https://virtuoso.dev/","keywords":["react","reactjs","virtual","endless","load more","list","scrolling","infinite","virtualized","grid","feed","chat"],"repository":{"type":"git","url":"git+https://github.com/bajakigabesz/react-virtuoso.git"},"author":{"name":"Petyo Ivanov"},"bugs":{"url":"https://github.com/bajakigabesz/react-virtuoso/issues"},"license":"MIT","readme":"<img src=\"https://user-images.githubusercontent.com/13347/101237112-ec4c6000-36de-11eb-936d-4b6b7ec94976.png\" width=\"229\" />\r\n\r\n[![npm version](https://badge.fury.io/js/@bajakigabesz%2Freact-virtuoso.svg)](https://badge.fury.io/js/@bajakigabesz%2Freact-virtuoso)\r\n\r\n**React Virtuoso** is the most powerful React virtual list/table component, full stop. Here's why:\r\n\r\n- Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;\r\n- Support for [reverse (bottom up) scrolling and prepending items](https://virtuoso.dev/prepend-items/) (chat, feeds, etc);\r\n- [Grouped mode with sticky headers](https://virtuoso.dev/grouped-by-first-letter/);\r\n- [Responsive grid layout](https://virtuoso.dev/grid-responsive-columns/);\r\n- [Table Support](https://virtuoso.dev/hello-table/);\r\n- [Automatic handling of content resize](https://virtuoso.dev/auto-resizing/);\r\n- [Custom Header, Footer, and empty list components](https://virtuoso.dev/customize-structure/);\r\n- [Pinned top items](https://virtuoso.dev/top-items/);\r\n- [Endless scrolling](https://virtuoso.dev/endless-scrolling/), [press to load more](https://virtuoso.dev/press-to-load-more/);\r\n- [Initial top most item index](https://virtuoso.dev/initial-index/);\r\n- [Scroll to index method](https://virtuoso.dev/scroll-to-index/).\r\n\r\nFor live examples and documentation, check the [documentation website](https://virtuoso.dev).\r\n\r\n## Sponsors\r\n\r\nIf you are using Virtuoso for work, [sponsor it](https://github.com/sponsors/petyosi). Any donation helps a lot with the project development and maintenance.\r\n\r\n## Get Started\r\n\r\n```sh\r\nnpm install react-virtuoso\r\n```\r\n\r\n```jsx\r\nimport * as React from 'react'\r\nimport * as ReactDOM from 'react-dom'\r\nimport { Virtuoso } from 'react-virtuoso'\r\n\r\nconst App = () => {\r\n  return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={index => <div>Item {index}</div>} />\r\n}\r\n\r\nReactDOM.render(<App />, document.getElementById('root'))\r\n```\r\n\r\n## [Grouped Mode](https://virtuoso.dev/grouped-by-first-letter/)\r\n\r\nThe `GroupedVirtuoso` component is a variant of the \"flat\" `Virtuoso`, with the following differences:\r\n\r\n- Instead of `totalCount`, the component exposes `groupCounts: number[]` property, which specifies the amount of items in each group.\r\n  For example, passing `[20, 30]` will render two groups with 20 and 30 items each;\r\n- In addition the `itemContent` property, the component requires an additional `groupContent` property,\r\n  which renders the **group header**. The `groupContent` callback receives the zero-based group index as a parameter.\r\n\r\n## [Grid](https://virtuoso.dev/grid-responsive-columns/)\r\n\r\nThe `VirtuosoGrid` component displays **same sized items** in multiple columns.\r\nThe layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.\r\n\r\n## [Table](https://virtuoso.dev/hello-table/)\r\n\r\nThe `TableVirtuoso` component works just like `Virtuoso`, but with HTML tables.\r\nIt supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table.\r\n\r\n## Works With Your UI Library of Choice\r\n\r\nYou can customize the markup up to your requirements - check [the Material UI list demo](https://virtuoso.dev/material-ui-endless-scrolling/).\r\nIf you need to support reordering, [check the React Sortable HOC example](https://virtuoso.dev/react-sortable-hoc/).\r\n\r\n## Documentation and Demos\r\n\r\nFor in-depth documentation and live examples of the supported features and live demos, check the [documentation website](https://virtuoso.dev).\r\n\r\n## Browser support\r\n\r\nTo support [legacy browsers](https://caniuse.com/resizeobserver), you might have to load a [ResizeObserver Polyfill](https://www.npmjs.com/package/resize-observer-polyfill) before using `react-virtuoso`:\r\n\r\n```\r\nimport ResizeObserver from 'resize-observer-polyfill'\r\nif (!window.ResizeObserver)\r\n  window.ResizeObserver = ResizeObserver\r\n```\r\n\r\n## Author\r\n\r\nPetyo Ivanov [@petyosi](//twitter.com/petyosi).\r\n\r\n## Contributing\r\n\r\n### Fixes and new Features\r\n\r\nTo run the tests, use `npm run test`.\r\nAn end-to-end browser-based test suite is runnable with `npm run e2e`, with the pages being `e2e/*.tsx` and the tests `e2e/*.test.ts`.\r\n\r\nA convenient way to debug something is to preview the test cases in the browser.\r\nTo do that, run `npm run browse-examples` - it will open a crude UI that lets you browse the components in the `e2e` folder.\r\n\r\n### Docs\r\n\r\nThe documentation site is built with docusaurus and the content is available in the `site/docs` directory.\r\nThe API reference is generated from the doc comments in `src/components.tsx`.\r\n\r\n## License\r\n\r\nMIT License.\r\n","readmeFilename":"README.md"}