This Gist was automatically created by Carbide, a free online programming environment.
You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/84c26d3fdfe06fddf24108ba528796d6).
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; | |
} |
This Gist was automatically created by Carbide, a free online programming environment.
You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/84c26d3fdfe06fddf24108ba528796d6).