<VirtualList
    data={['a', 'b', 'c']}
    renderRow={ row => <div>{row}</div> }
    rowHeight={22}
    overscanCount={10}
    sync
/>

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

import VirtualList from 'preact-virtual-list';
// Generate 100,000 rows of data
const DATA = [];
for (let x=1e5; x--; ) DATA[x] = `Item #${x+1}`;
// renders a single row
const Row = row => (
    <div class="row">{row}</div>
);
render((
    <VirtualList data={DATA} rowHeight={30} renderRow={Row} />
), document.body);