Skip to content

Instantly share code, notes, and snippets.

@carbide-public
Created April 15, 2023 03:47
Show Gist options
  • Save carbide-public/84c26d3fdfe06fddf24108ba528796d6 to your computer and use it in GitHub Desktop.
Save carbide-public/84c26d3fdfe06fddf24108ba528796d6 to your computer and use it in GitHub Desktop.
Virtualized++
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { AutoSizer,List, CellMeasurer } from 'react-virtualized'
import 'react-virtualized/styles.css'
import './styles.css'
class App extends Component {
renderItem({ index }) {
return (
<div
key={index}
className='row'
>
{index}
</div>
)
}
render() {
const {length} = this.props
return (
<List
className='list'
height={300}
rowCount={length}
rowHeight={25}
rowRenderer={this.renderItem.bind(this)}
width={250}
/>
)
}
}
function render() {
ReactDOM.render(
<App length={2000}/>,
document.getElementById('root')
);
}
render()
// this tells the hot reloading engine to do its magic
export function __render(){
render()
}
.list {
width: 100%;
border: 1px solid #DDD;
margin-top: 15px;
}
.row {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 25px;
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment