node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »


<ScrollViewport /> for Preact

NPM Travis

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

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

JSFiddle Demo


Usage Example

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. If rowHeight is not provided, the height of the first row will be calculated and extrapolated.

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


Prop Type Description
rowHeight Number Static height of a row (prevents style recalc)
defaultRowHeight Number Initial height of a row prior to dimensions being available
overscan Number Number of extra rows to render above and below visible list. Defaults to 10. *
sync Boolean If true, forces synchronous rendering **

* 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 without sync 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

Simple Example

View this example on JSFiddle

import ScrollViewport from 'preact-scroll-viewport';
class Demo extends Component {
    // 30px tall rows 
    rowHeight = 30;
    render() {
        // Generate 100,000 rows of data 
        let rows = [];
        for (let x=1e5; x--; ) rows[x] = `Item #${x+1}`;
        return (
            <ScrollViewport class="list" rowHeight={this.rowHeight}>
                { row => (
                    <div class="row">{row}</div>
                )) }
render(Demo, document.body);