react-window-scroller

Window scroller component for react-window

Install

yarn add react-window-scroller

Usage

Check 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>
)

Props

| 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 |

License

MIT © FedericoDiRosa