petyosi / react-virtuoso Goto Github PK
View Code? Open in Web Editor NEWThe most powerful virtual list component for React
Home Page: https://virtuoso.dev
License: MIT License
The most powerful virtual list component for React
Home Page: https://virtuoso.dev
License: MIT License
When upgraded to the latest version (0.12.0), my app is not buildable by TypeScript because of the following error:
TypeScript error in app/node_modules/react-virtuoso/dist/Virtuoso.d.ts(2,29):
Cannot find module 'tinyrx'. TS2307
1 | import React, { CSSProperties, FC, PureComponent, ReactElement } from 'react';
> 2 | import { TSubscriber } from 'tinyrx';
| ^
3 | import { TScrollLocation } from './EngineCommons';
4 | import { ListItem } from './GroupIndexTransposer';
5 | import { TRender, TRenderProps } from './VirtuosoList';
I can see that react-virtuoso
does not refer to the tinyrx
as its dependency.
Hi again,
For my use-case, I'm trying to have a 'back to top' button appear only when user scroll passed a certain limit in the list (most probably 2 x viewportHeight)
My first solution attempt was to position myself in the scrollingStateChange callback. And when the user stops scrolling, verify the scroller scrollTop and manage the button then. This method has some problems.
1- I have to declare a customer scroll component. Assign some ID to the div. In the scrollingStateChange, act only when the user stops scrolling, then fetch the scroller div with document.getElementById to determine its scrollTop value.
This works but does feel like a hack.
2- The button will only appear when the user stops scrolling. When usually this button will appear as soon as the trigger point get passed.
Maybe there is a nicer way to get this working already?
If not, would it be a good idea to expose an onScroll callback, supplying scrollTop as a parameter?
Thx a lot for all the help you've been providing. Its all very much appreciated.
Adding the virtuoso-package to our app causes it to crash with following error message ins MS Edge: "SCRIPT1028: Expected identifier, string or number". As far as I can tell MS Edge still doesn't support the es6 spread operator so seems this relates to how react-virtuoso is transpiled to es5
Hi, the first row of the list doesn't stick to the top.
You can reproduce it in the demo website example:
https://virtuoso.dev/top-items/
Steps to reproduce:
Tested on Chrome Version 72.0.3626.109 (Official Build) (64-bit), Linux.
I'm attempting to work on a previous issue that I have created, and would like to use playground
to aid me in debugging. However, I'm having a couple of issues getting it to work.
First up, neither of the following dependencies can be resolved.
react-virtuoso/playground/grid.tsx
Lines 5 to 6 in fa21f92
Second up, and this one is more on my limited experience in React, is how would you go about running the playground? Intuitively, I would want to run npm run playground
but no playground
script exists. Should I be running create-react-app
in the playground
directory? Something completely different?
hi @petyosi , my packages version:
"webpack": "^3.7.1",
"@babel/core": "^7.1.2",
"@babel/plugin-syntax-class-properties": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/polyfill": "^7.0.0-rc.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
Would like to see some features around scrolling to a specific index and an option to start at bottom.
hi, @petyosi , do you want to add pull refresh? I really need this feature right now, and probably others too :)
When upgraded to the latest version (0.11), my app is not buildable by TypeScript because of the following error:
Property 'computeItemKey' is missing in type '{ totalCount: number; overscan: number; itemHeight: number; className: string; item: (index: number) => Element; }' but required in type 'Readonly<VirtuosoProps>'.
There is not a single mention about computeItemKey
in the docs or the code examples
Hi,
Is there a changelog for react-virtuoso?
Thanks
This is a bit of a special and maybe even contrived case, at least to the extent I did it, but this could lead to mistakes in more reasonable examples aswell.
Virtuoso doesn't really handle big differences in height very well, when there is a sudden decrease in size.
<Virtuoso style={{ width: '100%', height: '400px' }} overscan={400} totalCount={200} item={(index: number) => {
return <div style={{height: (index < 100 ? 200 : 20)}}>test {index}</div>;
}} />
Since the first 100 items have a height of 200 Virtuoso assumes that height for all elements to begin with and once you scroll down to the items with a height of 20 it does not render enough items to fill the viewport.
I'm not sure if I'm doing something wrong or this is simply a limitation of the list.
Hi, I tried your component and works fast ! I wondered if we can add alternate row color using
&:nth-of-type(odd)
Since the item that we supply is inside another div, so it always @ 0 numbered row
Thanks
I used react-virtuoso in all my projects. I can only add a unique class name to manipulate the native dom and get the last position of the scroll bar . On the next load, scroll to the previous position. I like react-virtuose.
Something like domEl.scrollIntoView();
ex.
elmnt.scrollIntoView({block: 'start', behavior: 'smooth'});
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Thx
Hi, would you accept a PR to add Flow type annotations to the project?
I was just playing with the Virtuoso component, and noticed for lists with very large number of items, you can't scroll all the way down if list items have styling that affects their height. You can verify this with a list of 1,000,000 items with some vertical padding or a larger font size set on the items. Not a deal breaker as it's unlikely this happens in practice, but was wondering what the underlying issue is.
Hi, first of all, congrats for your awesome library! I've been trying to test some components where I use it, but the list never gets rendered π
import * as React from 'react';
import { Virtuoso } from 'react-virtuoso';
import { render } from '@testing-library/react';
function Component () {
return (
<Virtuoso
totalCount={100}
item={index => <div>{index}</div>}
/>
);
}
describe('Test', () => {
it('should render list of items', () => {
const { debug } = render(<Component />);
debug(); // Prints an empty list
});
});
Regression from tsdx - jaredpalmer/tsdx#412. Will follow that issue and upgrade accordingly.
Hi, I was wondering if you do plan to support a grid layout? I think a simple fixed column width grid support would be more than enough to cover most of the use cases.
Hey, just stumbled on your library (via Sid mailing list). Looks slick π
I spotted on the demo site it seems to not like the browser page scrolling? It results in a nasty flicker and a times no longer paints the list.
Device is an iPhone X, iOS 12.2. Suspect you could replicate on other iOS devices.
We have a GroupedVirtuoso list with known item heights. But each item and group header has a different height.
Is it possible to achieve this using the itemHeight prop ? Like passing a function instead of a number, function that would take a group index or an item index and would return an itemHeight.
something like
<GroupedVirtuoso
itemHeight={(itemIndex) => number}
groupHeight={(groupIndex) => number}
/>
BTW. I cannot use the auto sizer feature, because most of my items have negative margins for imbrication/overlapping.
Thx
I am currently trying to find a way to use one of your components to render table rows (specifically using material ui).
Here is the general idea of what I'm aiming for
<Table>
<TableHead>...</TableHead>
<TableBody>
<Virtuoso ... />
</TableBody>
</Table>
however I see the issue is that your Virtuoso
component renders a few divs I'm assuming to track height, number of items in view, etc.
Maybe there is a way we can pass our own component as a prop to render as a parent element? something={TableBody}
?
I'm essentially asking if there is a good way to prevent this kind of markup below?
...
<tbody>
<div ...>
<div ...>
<tr>
...
Let me know what else I can provide. I appreciate what you have done so far!
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
All of the above types function correctly to render a React component. But item as a prop lacks the alternatives to ReactElement
in it's return type.
I tried to return null
from item and it works on the javascript side. But I have to cast null as ReactElement
to make it work in ts.
Would you consider to type item as (index: number) => ReactNode
? Or is there a reason why the return type is strict to be ReactElement only?
Is there any reason of why Virtuoso
doesn't support className
but does support style
?
FIrst off, this is a great library and I've got into one of our projects with massive traffic, so it will be stress-tested.
When creating a bunch of examples I discovered that while it doesn't break SSR specifically, but there is no way to support the server at the moment. The effects it triggers don't run in a server environment, so the component comes out empty when rendered on the server. This makes sense when you consider the lack of an actual window on the server, however in most applications rendering at least some content is much better than coming back with nothing, especially for SEO purposes and data retention.
I am aware of the limitations when it comes to windowing and a windowless Node instance, so I'm proposing the following:
I can help brainstorm ideas or even contribute code if you like as I know that this is a larger addition.
https://github.com/ustbhuangyi/better-scroll
or
Provide dynamic setting margin-top method
I'm building something similar to https://virtuoso.dev/scroll-to-group/
I'd like to trigger some functionality whenever a new group index becomes active to do things like add an active class to the navigational buttons, but I can't seem to find anything that exposes the current active group index.
Am I missing something? Otherwise, I think it would be best to expose it in the scrollingStateChange
or in itemsRendered
Could this library be used alongside react-custom-scrollbars? I was previously using react-window and this was supported by passing a ref of the rendered list to react-custom-scrollbars onScroll method but doing the same seems to not work with virtuoso as the ref is not a DOM element.
I've attached an example of what I'm trying to achieve.
Edit: here's the link - https://codesandbox.io/s/practical-bouman-z6wqd
Marking certain indices as sticky can be used to create groups. The rendering itself won't change, but the implementation should switch the pinned items to the closest sticky one.
Hi! I'm building a chat system using React Virtuoso and I'm using scrollToIndex
to scroll right to the bottom of the list, with a tiny delay. This works "ok" but as I said there's a tiny delay. I was wondering if there's a way to automatically show the list scrolled at the bottom already?
Thanks!
I need get full height for implement my own scroll behavior around scrollTop
for VirtuosoScroller
.
I think that need/can to be implemented some callback prop for Virtuoso
, that can be passed into VirtuosoView
and call function with fillerHeight
as param.
if you know some better solution. pls tell me
if this idea not bad - i can try to create PR
sorry for my lang
first off, this library is great and exactly what I need!
I am using the VirtuosoGrid
component, I supply it an array of small objects (from redux). I am trying to allow a user to use a text input to search and filter the boxes in the grid, so I have the text input text filter the array that is passed to this grid, when the list is "filtered" my react app crashes because a component that did have one of the "items" is now getting undefined.
I'm probably missing something simple. But it seems like this should just work?
// user typed in "mi"
const searchText = 'z';
const list = [{a: 'Mike'}, {a: 'Sam'}....... {a: 'Michael'}];
// some logic to filter the list based on text input
const filteredList = list.filter(item => item.a === searchText);
// down way below in renderland
<VirtuosoGrid
totalCount={filteredList.length}
item={idx => <MyComponent item={filteredList[idx]} />}
/>
When the parent element of Virtuoso changes its display mode from visible to hidden, the list is eventually empty.
I use @reach/tabs
and all the TabPanel
elements contain a Virtuoso list. If I repeatedly click on the tabs to hide and display my lists, one of them end to be empty.
I also tested by manually set/unset display: none
on the parent and the result is the same.
Any idea?
Thanks for the great work by the way π
An enhancement request - any chance of having the same autosizing as the width part?
Perhaps this is already doable via standard CSS things (like flex), but I can't seem to get it to work.
It would be useful to hard code a height of the scroll container, but also have it flex to fit the white space.
If the window changes size, or another component above changes size and pushes/pulls on the scroll container, it could automatically resize to only fill the white space.
This would be particularly useful for instances where the list takes up the whole width of the window, and it's annoying to have the window scroll and the list scroll right next to each other.
Repro:
https://stackblitz.com/edit/react-ds95kg?file=example.js
Introduced when the styling was extracted to a stylesheet.
Hi, I wanted to test that lib on an umd application.
After putting the https://unpkg.com/[email protected]/dist/react-virtuoso.umd.production.js in the the head of my html. i cant find the Virtuoso.
Tried
Is there anyway to achieve what WindowScroller
does in react-virtuoso? I'm looking to create a Twitter/Facebook style news feed where you use the native window scrollbars to scroll an infinite list (or in my case, grid). Thanks in advance.
Scrolling down, then up in Edge (Windows 10) behaves erratically, at least in a VM. The top items do not seem to be re-displayed properly.
FF and Chrome work as expected.
The application works wonderfully for me with material-ui ExpansionPanels. It correctly expands and closes the panel and moves/adjusts everything else in the list accordingly (unlike react-window or react-virtualize').
But unlike those other packages, if I need to hide a row (the expansion component only needs to be shown if a criterion is met) it fails. A zero height div, or a null object fails, and a 1px height div severely slows everything down.
Is there a way to deal with this, like to use the ItemContainer?
I have created a codesandbox to illustrate the problem I'm having: https://codesandbox.io/s/wizardly-http-61djr. It's important to have the console open here to see the disparity between what "should" be rendered and what actually gets rendered.
In general, when a list is shuffled, <Virtuoso/>
does not necessarily re-render in the correct order or render all of the items that it should. Instead, virtuoso seems to hold on to old values, even when computeItemKey
is used.
I came to find this issue when working on a list that was filtered by text. Changing the text filter would change where some items should appear in the list, or whether they should appear at all. I.e. while typing a filter, an item that was previously at index 5 might end up at index 2, and an item previously at item 4 should no longer appear at all. In that particular example, I ended up getting in to a situation where the startIndex
for some range always exceeded maxIndex
here and so some items would not render at all after filtering caused a reduction in the overall size of a list. It seemed to be that for some items/nodes, old indices were being held that were outside the bounds of a new, reduced size list.
I'm curious whether this can be considered a bug or whether virtuoso is not meant to support the use case of a filterable list, a list that shuffles, etc.
I'm hacking at the library to get it to display a horizontal list. It seems built only for vertical lists.
Is there any easy way to get it to display the virtualized list horizontally instead of vertically?
I'm using a GroupedVirtuoso with buttons in each row. To make my list more accessible, I'm trying to keep track of the focused index, so I can auto-scroll the list as a user tabs through it.
However, In order to properly style my list elements, I needed to add an ItemContainer
. Once I add the ItemContainer
in combination with setFocusedIndex
via useState
, it will always cause a rerender of the list once I try to tab past the first button and thus can't tab anywhere past the first row.
CodeSandbox with reproduced the issue:
https://codesandbox.io/s/heuristic-dijkstra-ml1sj
When totalCount is lowered (e.g. to 1), no items are rendered. Changing the totalCount appears to break the component in other circumstances too. For example, if totalCount is lowered to 0 and then increased again, only the last item is rendered.
In Edge (pre-Chromium), scroll methods aren't supported that well.
The example https://virtuoso.dev/scroll-to-index/ doesn't work at all in Edge.
To fix, will need to add a polyfill:
https://github.com/iamdustan/smoothscroll
When I set the totalCount
of VirtuosoGrid to 0
, nothing is rendered yet item
is called. Is this expected behaviour?
ReactDOM.render(
<VirtuosoGrid
totalCount={0}
item={index => {
console.log(`item(${index})`);
return <p>Item {index}</p>;
}}
/>,
document.getElementById('root')
);
item(0)
VirtuosoScroller.tsx
export declare type TScrollContainer = FC<{
style: CSSProperties;
className?: string;
reportScrollTop: (scrollTop: number) => void;
scrollTo: (callback: (scrollTop: number) => void) => void;
}>;
In VirtuosoScroller types is currently missing a children
prop type, without this prop typescript will not allow you to pass in children to your custom scroll component.
An example of passing children down is shown here https://virtuoso.dev/custom-scroll-container/ but the given example uses merely javascript so typescript errors won't show here.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.