Window scroller component for react-window
yarn add react-window-scrollerCheck out the examples: https://federicodirosa.github.io/react-window-scroller
With a List component:
import React from 'react'
import { FixedSizeList as List } from 'react-window'
import { ReactWindowScroller } from 'react-window-scroller'
const App = () => (
<ReactWindowScroller>
{({ ref, outerRef, style, onScroll }) => (
<List
ref={ref}
outerRef={outerRef}
style={style}
height={window.innerHeight}
itemCount={1000}
itemSize={100}
onScroll={onScroll}
>
{Row}
</List>
)}
</ReactWindowScroller>
)With a Grid component:
import React from 'react'
import { VariableSizeGrid as Grid } from 'react-window'
import { ReactWindowScroller } from 'react-window-scroller'
const App = () => (
<ReactWindowScroller isGrid>
{({ ref, outerRef, style, onScroll }) => (
<Grid
ref={ref}
outerRef={outerRef}
style={style}
height={window.innerHeight}
width={window.innerWidth}
columnCount={1000}
columnWidth={(index) => columnWidths[index]}
rowCount={1000}
rowHeight={(index) => rowHeights[index]}
onScroll={onScroll}
>
{Cell}
</Grid>
)}
</ReactWindowScroller>
)| Prop name | Type | Description | Default |
|---|---|---|---|
| children | function | Render props function called with 4 props: ref, outerRef, style and onScroll |
undefined |
| throttleTime | number | Timing (ms) for the throttle on window scroll event handler | 10 |
| isGrid | boolean | Set to true if rendering a react-window Grid component (FixedSizeGrid or VariableSizeGrid) | false |
MIT © FedericoDiRosa