Repository files navigation

A compositional component that renders its children based on the current viewport.

Useful for those super important business applications where one must showall million rows.

Simply wrap a large collection of children in this component, and they will be rendered based on the viewport.You can define a default row height (defaultRowHeight) to use prior to dimensions being available, or a static row height (rowHeight) to avoid style recalculation entirely. IfrowHeight is not provided, the height of the first row will be calculated and extrapolated.

// create 100,000 children:letchildren=[];for(leti=1;i<100000;i++){children.push(<divclass="row">{i}</div>);}// ...but only render what is in-viewport:render(<ScrollViewportrowHeight={22}>{children}</ScrollViewport>);

* Why overscan? Rendering normalized blocks of rows reduces the number of DOM interactions by grouping all row renders into a single atomic update.

** About synchronous rendering: It's best to try withoutsync enabled first. If the normal async rendering behavior is fine, leave sync turned off. If you see flickering, enabling sync will ensure every update gets out to the screen without dropping renders, but does so at the expense of actual framerate.

Without Overscan	With Overscan

View this example on JSFiddle

importScrollViewportfrom'preact-scroll-viewport';classDemoextendsComponent{// 30px tall rowsrowHeight=30;render(){// Generate 100,000 rows of dataletrows=[];for(letx=1e5;x--;)rows[x]=`Item #${x+1}`;return(<ScrollViewportclass="list"rowHeight={this.rowHeight}>{rows.map(row=>(<divclass="row">{row}</div>))}</ScrollViewport>);}}render(Demo,document.body);

MIT