{"_id":"react-tiny-virtual-list-dmk","_rev":"1-6eb90aa365420ed659ac1d67b735fbd5","name":"react-tiny-virtual-list-dmk","dist-tags":{"latest":"2.2.2"},"versions":{"2.2.1":{"name":"react-tiny-virtual-list-dmk","version":"2.2.1","description":"A tiny but mighty list virtualization component, with zero dependencies 💪","main":"build/react-tiny-virtual-list.cjs.js","module":"build/react-tiny-virtual-list.es.js","jsnext:main":"build/react-tiny-virtual-list.es.js","types":"types/index.d.ts","scripts":{"build":"babel-node --presets es2015 ./config/build.js","lint":"eslint ./src --ext .ts,.tsx --max-warnings 0 --format codeframe","start":"nwb serve-react-app demo/src/index.tsx --config ./config/nwb/config.js","test":"jest --config ./config/jest/config.json --no-cache","test:coverage":"npm run test -- --coverage","test:watch":"npm run test -- --watch","test:ci":"npm run lint && npm run test && codecov"},"dependencies":{"prop-types":"^15.8.1"},"peerDependencies":{"react":"15.x || 18.x"},"devDependencies":{"@types/jest":"^20.0.8","@types/prop-types":"^15.5.1","@types/react":"^15.0.38","@types/react-dom":"^15.5.4","awesome-typescript-loader":"^3.2.1","babel-cli":"^6.26.0","babel-eslint":"7.0.0","babel-jest":"^19.0.0","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","babel-preset-typescript":"^7.0.0-alpha.19","codecov":"^1.0.1","eslint":"^4.10.0","eslint-plugin-shopify":"^22.1.0","fs-extra":"^4.0.1","jest":"^19.0.2","nwb":"0.15.x","react":"^15.4.2","react-addons-test-utils":"^15.4.2","react-dom":"^15.4.2","react-test-renderer":"^15.4.2","rimraf":"^2.6.1","rollup":"^0.49.2","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^8.2.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-typescript2":"^0.15.0","rollup-plugin-uglify":"^2.0.1","tslint":"^5.10.0","tslint-config-shopify":"^3.0.2","typescript":"2.8.3"},"author":{"name":"Clauderic Demers","email":"me@ced.io"},"user":"clauderic","homepage":"https://github.com/clauderic/react-tiny-virtual-list","license":"MIT","repository":{"type":"git","url":"git+https://github.com/clauderic/react-tiny-virtual-list.git"},"bugs":{"url":"https://github.com/clauderic/react-tiny-virtual-list/issues"},"keywords":["react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized","virtualization","windowing"],"gitHead":"8bd5d72bae33c5555ecb70848b1d20995f52b3dd","_id":"react-tiny-virtual-list-dmk@2.2.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-he/fBSMt/JSizn3zYZvtKo15w6N2PQV3v24TV1Z0nBPzyDnlMJEMyaq08ou+wG5ydb0F3Q3nP9SbIf6+GrbpoQ==","shasum":"09c21d7c61dbdfbcbe5c92b5104586509735cdd8","tarball":"https://registry.npmjs.org/react-tiny-virtual-list-dmk/-/react-tiny-virtual-list-dmk-2.2.1.tgz","fileCount":3,"unpackedSize":16773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWRHrMDNcQP1F26UKQS4xQI631yL5DeEKWiBeII6uoKAIhAMLEtj+gFKqpWW8Diubx1WjnGWodC0946gqBFqHuR5O5"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwY82ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVJBAAnWI2P6ru37V0LxO3PNt81sfDjk7wmGVmgvJG6HzzzeLq2FjZ\r\nJ61iUcpwimeGjrGDLQWGKh9+PT6tXneUMZHoOWQsZpJ9NO+9YytFQ+b/FDLA\r\n+K58G0R7IFXkbGRpbTrzZiBn/Ukmu0m22Kwi/w5L5laxNUultj+3StijErct\r\nfIlDSHfltrHiBij58ElEvToZSuHwSBBoqSllbMY9Vqy7eYdwNbo7CJQsc1ig\r\nJHphrfzl9meBQUtOaSa32sUDJo1jYKmGARh11EYd+gn1RpQMjw914UZLTKBq\r\nvebD7dYzI1uxljT3cu5tZah8nCG9wVzuzhIfQ5JRpB6fwrn6gd/zRjHx71Wn\r\nDV8RkxfQDgBNficCokZqXgad9qpJwv5xW0tH0S3NdvoKUluAwgRWDgZFJAKn\r\npkVxDv/UfDQbb0nPxe0aIB02CtjvB0ifttt0ZowMmi/uVXkcE6J7pkOkJW9C\r\nPnSrSFzMYWyGw9Vs8e2BLsuEFgu1D1vEMxXn9DbgvSzE/jnBNzI1h1Bffyq4\r\n8avQRV1oW4g8/W2HkFcz2oOMFCZauGSr9mMEmF8dxVmeqrq+DrAAU4vLlJEl\r\ndIiumKQczIfbR4dXmwHpbL4dFVAjH3HrkR4db5cMmVvZFVwVuFSzhQsdJgkP\r\n+pgoEhq4+eww2FZQZbbm3WSmQRskMaN/Fis=\r\n=L2ND\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"poiz","email":"seesolutionz@gmail.com"},"directories":{},"maintainers":[{"name":"poiz","email":"seesolutionz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tiny-virtual-list-dmk_2.2.1_1656852277961_0.8747380742685884"},"_hasShrinkwrap":false},"2.2.2":{"name":"react-tiny-virtual-list-dmk","version":"2.2.2","description":"A tiny but mighty list virtualization component, with zero dependencies 💪","main":"build/react-tiny-virtual-list.cjs.js","module":"build/react-tiny-virtual-list.es.js","jsnext:main":"build/react-tiny-virtual-list.es.js","types":"types/index.d.ts","scripts":{"build":"babel-node --presets es2015 ./config/build.js","lint":"eslint ./src --ext .ts,.tsx --max-warnings 0 --format codeframe","start":"nwb serve-react-app demo/src/index.tsx --config ./config/nwb/config.js","test":"jest --config ./config/jest/config.json --no-cache","test:coverage":"npm run test -- --coverage","test:watch":"npm run test -- --watch","test:ci":"npm run lint && npm run test && codecov"},"dependencies":{"prop-types":"^15.8.1"},"peerDependencies":{"react":"15.x || 18.x"},"devDependencies":{"@types/jest":"^20.0.8","@types/prop-types":"^15.5.1","@types/react":"^15.0.38","@types/react-dom":"^15.5.4","awesome-typescript-loader":"^3.2.1","babel-cli":"^6.26.0","babel-eslint":"7.0.0","babel-jest":"^19.0.0","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.23.0","babel-preset-typescript":"^7.0.0-alpha.19","codecov":"^1.0.1","eslint":"^4.10.0","eslint-plugin-shopify":"^22.1.0","fs-extra":"^4.0.1","jest":"^19.0.2","nwb":"0.15.x","react":"^18.2.0","react-addons-test-utils":"^15.6.2","react-dom":"^18.2.0","react-test-renderer":"^15.4.2","rimraf":"^2.6.1","rollup":"^0.49.2","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^8.2.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-typescript2":"^0.15.0","rollup-plugin-uglify":"^2.0.1","tslint":"^5.10.0","tslint-config-shopify":"^3.0.2","typescript":"2.8.3"},"author":{"name":"Clauderic Demers","email":"me@ced.io"},"user":"clauderic","homepage":"https://github.com/clauderic/react-tiny-virtual-list","license":"MIT","repository":{"type":"git","url":"git+https://github.com/clauderic/react-tiny-virtual-list.git"},"bugs":{"url":"https://github.com/clauderic/react-tiny-virtual-list/issues"},"keywords":["react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized","virtualization","windowing"],"gitHead":"1c4344ae22b240be62ee821cf55a76c22212dd7d","_id":"react-tiny-virtual-list-dmk@2.2.2","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-z9nmb0eruLg8pVXXMe+NTw/nR5c9gxfXwr9148K/AHcxls5wL2I61qUg/4RmMAEfKz4yE/nCsR35qcihmcxMkw==","shasum":"98bcee4d95f807fe451ead143064bba107b346ca","tarball":"https://registry.npmjs.org/react-tiny-virtual-list-dmk/-/react-tiny-virtual-list-dmk-2.2.2.tgz","fileCount":14,"unpackedSize":114518,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/cIvo8EOPk3cVgeb7JqMA3+DGjgkXXK0/irzJi18x0wIhAIcREuGikmd9b2+CNbwJtavXsoDwyT/JmWt/rpDmFaYT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwcTPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokMA//QoKo/giFTWdAyrqO6TZSaEab7kOPknnlHTN6ydPyXe1oQaOI\r\nZ2hUtDDkeqP9M10vdtAB5uGPEFh9bakuVeeg3Xs/T/aacEhb3anRo9jhvPNW\r\neSPu9jFidVTRsAfIeuYLQnpaWbvuzKuu2dMrLFyuicpE3/n1Ma6OZNEAbe/9\r\nZ8TrOZDvHNuIJ9hWP48fEjrmbeB9eFMzC1+jY233nZyZlUb/Rhkw+Wuo1omk\r\n73CP2NcjiZYUMH9QvxGoHaH00cnODUpBWJ6YfuAtd0vHv0udi8kfHdTz+uE4\r\nb4QCw7wbnZwm2ZqMvEBDcGDZOxqQm0LaXlq4KA1EhYR5QjcHcjKW2fu0rNG3\r\nn8dqadOwraugkDp0Byvy81wA4nFwMkhc3X7pp+eHZQULSnGuO6BQZwLbgArb\r\nkXzIPBf4O/00lS3ngW1EcrKriVjsPhn3EpNorj0o1WyizOyeA+hVvBhy5uPK\r\nZtDBxPBtQ6qaDV4VS1rrUBfsosaYQVqAzy1tcMVqAaoIdQhdeIzbhQ7Rc5nz\r\njMtSWZciLwuR8iRlyQmgAG308OtNRVV/92efctg/rLRST1X9BGF6REdUZZXt\r\n5ZFFBJLDemM+oS2n3YJWetYneadRJmX9700ZbHF8m4z+yFfLca9U/CaXNz+M\r\nX7t9T8DuBGOUd+GHtT0rwfwdO/IxL8TnQCs=\r\n=DvSy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"poiz","email":"seesolutionz@gmail.com"},"directories":{},"maintainers":[{"name":"poiz","email":"seesolutionz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tiny-virtual-list-dmk_2.2.2_1656865999462_0.5628314066232021"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-03T12:44:37.960Z","2.2.1":"2022-07-03T12:44:38.143Z","modified":"2022-07-03T16:33:19.742Z","2.2.2":"2022-07-03T16:33:19.671Z"},"maintainers":[{"name":"poiz","email":"seesolutionz@gmail.com"}],"description":"A tiny but mighty list virtualization component, with zero dependencies 💪","homepage":"https://github.com/clauderic/react-tiny-virtual-list","keywords":["react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized","virtualization","windowing"],"repository":{"type":"git","url":"git+https://github.com/clauderic/react-tiny-virtual-list.git"},"author":{"name":"Clauderic Demers","email":"me@ced.io"},"bugs":{"url":"https://github.com/clauderic/react-tiny-virtual-list/issues"},"license":"MIT","readme":"
\n\n
\n\n# react-tiny-virtual-list\n\n> A tiny but mighty list virtualization library, with zero dependencies 💪\n\n[![npm version](https://img.shields.io/npm/v/react-tiny-virtual-list.svg)](https://www.npmjs.com/package/react-tiny-virtual-list)\n[![npm downloads](https://img.shields.io/npm/dm/react-tiny-virtual-list.svg)](https://www.npmjs.com/package/react-tiny-virtual-list)\n[![Build Status](https://travis-ci.org/clauderic/react-tiny-virtual-list.svg?branch=master)](https://travis-ci.org/clauderic/react-tiny-virtual-list)\n[![codecov](https://codecov.io/gh/clauderic/react-tiny-virtual-list/branch/master/graph/badge.svg)](https://codecov.io/gh/clauderic/react-tiny-virtual-list)\n![typescript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/clauderic/react-tiny-virtual-list/blob/master/LICENSE)\n[![Gitter](https://badges.gitter.im/clauderic/react-tiny-virtual-list.svg)](https://gitter.im/clauderic/react-tiny-virtual-list)\n\n- **Tiny & dependency free** – Only 3kb gzipped\n- **Render millions of items**, without breaking a sweat\n- **Scroll to index** or **set the initial scroll offset**\n- **Supports fixed** or **variable** heights/widths\n- **Vertical** or **Horizontal** lists\n\nCheck out the [demo](https://clauderic.github.io/react-tiny-virtual-list/) for some examples, or take it for a test drive right away in [Code Sandbox](https://codesandbox.io/s/kymm7z9qr).\n\n## Getting Started\n\nUsing [npm](https://www.npmjs.com/):\n\n```\nnpm install react-tiny-virtual-list --save\n```\n\nES6, CommonJS, and UMD builds are available with each distribution. For example:\n\n```js\nimport VirtualList from 'react-tiny-virtual-list';\n```\n\nYou can also use a global-friendly UMD build:\n\n```html\n\n\n```\n\n## Example usage\n\n```js\nimport React from 'react';\nimport {render} from 'react-dom';\nimport VirtualList from 'react-tiny-virtual-list';\n\nconst data = ['A', 'B', 'C', 'D', 'E', 'F', ...];\n\nrender(\n \n
// The style property contains the item's absolute position\n Letter: {data[index]}, Row: #{index}\n
\n }\n />,\n document.getElementById('root')\n);\n```\n\n### Prop Types\n\n| Property | Type | Required? | Description |\n| :---------------- | :----------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| width | Number \\| String\\* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |\n| height | Number \\| String\\* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |\n| itemCount | Number | ✓ | The number of items you want to render |\n| renderItem | Function | ✓ | Responsible for rendering an item given it's index: `({index: number, style: Object}): React.PropTypes.node`. The returned element must handle key and style. |\n| itemSize | | ✓ | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number` |\n| scrollDirection | String | | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |\n| scrollOffset | Number | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset |\n| scrollToIndex | Number | | Item index to scroll to (by forcefully scrolling if necessary) x |\n| scrollToAlignment | String | | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |\n| stickyIndices | Number[] | | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`) |\n| overscanCount | Number | | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |\n| estimatedItemSize | Number | | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |\n| onItemsRendered | Function | | Callback invoked with information about the slice of rows/columns that were just rendered. It has the following signature: `({startIndex: number, stopIndex: number})`. |\n| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region. It has the following signature: `(scrollTop: number, event: React.UIEvent)`. |\n\n_\\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`_\n\n### Public Methods\n\n#### recomputeSizes (index: number)\n\nThis method force recomputes the item sizes after the specified index (these are normally cached).\n\n`VirtualList` has no way of knowing when its underlying data has changed, since it only receives a itemSize property. If the itemSize is a `number`, this isn't an issue, as it can compare before and after values and automatically call `recomputeSizes` internally.\nHowever, if you're passing a function to `itemSize`, that type of comparison is error prone. In that event, you'll need to call `recomputeSizes` manually to inform the `VirtualList` that the size of its items has changed.\n\n### Common Issues with PureComponent\n\n`react-tiny-virtual-list` uses [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent), so it only updates when it's props change. Therefore, if only the order of your data changes (eg `['a','b','c']` => `['d','e','f']`), `react-tiny-virtual-list` has no way to know your data has changed and that it needs to re-render.\n\nYou can force it to re-render by calling [forceUpdate](https://reactjs.org/docs/react-component.html#forceupdate) on it or by passing it an extra prop that will change every time your data changes.\n\n## Reporting Issues\n\nFound an issue? Please [report it](https://github.com/clauderic/react-tiny-virtual-list/issues) along with any relevant details to reproduce it. If you can, please provide a live demo replicating the issue you're describing. You can [fork this Code Sandbox](https://codesandbox.io/s/kymm7z9qr) as a starting point.\n\n## Contributions\n\nFeature requests / pull requests are welcome, though please take a moment to make sure your contributions fits within the scope of the project. [Learn how to contribute](https://github.com/clauderic/react-tiny-virtual-list/blob/master/CONTRIBUTING.md)\n\n## Acknowledgments\n\nThis library draws inspiration from [react-virtualized](https://github.com/bvaughn/react-virtualized), and is meant as a bare-minimum replacement for the [List](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md) component. If you're looking for a tiny, lightweight and dependency-free list virtualization library that supports variable heights, you're in the right place! If you're looking for something that supports more use-cases, I highly encourage you to check out [react-virtualized](https://github.com/bvaughn/react-virtualized) instead, it's a fantastic library ❤️\n\n## License\n\nreact-tiny-virtual-list is available under the MIT License.\n","readmeFilename":"README.md"}