docs: add react-virtuoso examples #415
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -186,6 +186,7 @@ | |||
| "react-dom-16": "npm:[email protected]", | |||
| "react-dom-17": "npm:[email protected]", | |||
| "react-virtualized": "9.22.3", | |||
| "react-virtuoso": "^2.17.2", | |||
There was a problem hiding this comment.
With the current config off renovate dev-depedencies are pinned 🙂
| "react-virtuoso": "^2.17.2", | |
| "react-virtuoso": "2.17.2", |
There was a problem hiding this comment.
Good catch (again) 👍
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| scrollerRef={droppableProvided.innerRef} |
There was a problem hiding this comment.
We should avoid the use of @ts-ignore when we can. Instead of by passing TypeScript we could make sure that we are getting what we are expecting.
In this case, droppableProvided.innerRef is expecting an HTMLElement or null, but scrollerRef can also give the window object. This causes an error, because based on droppableProvided.innerRef's type it can't take the window object as argument. We can make this type error go away if we add a check like we do in this following suggeston:
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | |
| // @ts-ignore | |
| scrollerRef={droppableProvided.innerRef} | |
| scrollerRef={(scroller) => { | |
| invariant( | |
| scroller instanceof HTMLElement || scroller === null, | |
| 'scroller should be an instance of HTMLElement or be null', | |
| ); | |
| droppableProvided.innerRef(scroller); | |
| }} |
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| scrollerRef={droppableProvided.innerRef} |
| data={quotes} | ||
| style={{ width: 300, height: 500 }} | ||
| // eslint-disable-next-line react/no-unstable-nested-components | ||
| itemContent={(index, quote) => ( |
There was a problem hiding this comment.
For the sake of people not messing up when customizing, I prefer lifting the itemContent callback out as much as possible. If you need to access anything from within the context, you can do this: https://codesandbox.io/s/quiet-butterfly-10xfm5?file=/src/App.tsx
| {...props} | ||
| className="height-preserving-container" | ||
| // check styling in the style tag below | ||
| style={{ '--child-height': `${size}px` }} |
There was a problem hiding this comment.
I don't like this hack :(, but for the sake of moving forward, it's ok for now.
|
support for nested lists using react virtuoso? 👀 @Xhale1 |
react-virtuosoreact-virtualizedas not maintained