Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

virtuoso

v0.2.0arrow_drop_down
v0.2.0
STATUS
Passing
DOWNLOADS
25
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 months ago
SIZE
31 KB
subject
React Virtuoso is a simple, easy to use React component made to render huge data lists.
1 contributor
Use virtuoso in your project ?
Copied
npm i @bit/petyosi.react-virtuoso.virtuoso
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right

The total amount of items to project

The amount in (pixels) to add in addition to the screen size

The amount of items to pin at the top of the scroll

Content to be displayed at the bottom of the list

Item renderer prop - accepts the item index. To increase performance, use React.memo for the child contents.

Optional, use for performance boost. Sets the height of the each item to a fixed amount, causing the list to skip the measurement operations. Use this only if you are certain that the items will stay the same size regardless of their content, the screen size, etc. Notice: If you don’t get that right, the items won’t overlap each other, but the list may not render fully or the total scroll size might be wrong, causing some items to be hidden.

Test Summary

initially generates empty generator

Pass

preserves increasing sequence

Pass

preserves decreasing sequence

Pass

preserves random sequence

Pass

remains invariant after removal

Pass

yields tuples for a given range

Pass

finds the largest number that does not exceed a given value

Pass

yields tuples for a given range (2nd example)

Pass

starts with a default value and length

Pass

sets the first value as the default one

Pass

does not alter the list if the value is the same as the existing range

Pass

does not alter the list if the same value is inserted

Pass

inserting at the beginning offsets the existing range

Pass

merges with the previous range if values are the same

Pass

merges with the next range if values are the same

Pass

splits an existing range

Pass

overrides an existing range

Pass

overrides multiple intervals

Pass

joins split ranges

Pass

calculates total for a given end index

Pass

handles subsequent insertions correctly (bug)

Pass

handles subsequent insertions correctly (bug #2)

Pass

Starts with a single, endless value

Pass

Copies the inserted range in the offset tree

Pass

Yields the items at a given range

Pass

Yields the items at a given range

Pass

calculates the total height of the list

Pass

leaves space for the footer

Pass

recalculates total when item height changes

Pass

emits a single item when the size is unknown

Pass

fills in the space with enough items

Pass

provides exact items for a given size

Pass

moves to the correct window

Pass

fills in the overscan

Pass

skips the fixed items

Pass