React Adaptive Grid

Installation

npm install --save react-adaptive-grid

Features

• windowing - render only visible items
• relative positioning - all items position relative each other
• scale items in proportion

Usage

import Grid from 'react-adaptive-grid'

// Immutable.js List
const items = List([
    Map({id:1, foo: 'bar', width: 200, height: 300}),
    ...
])

// Your component must accept 'data' prop.
const ItemComponent = ({data, width, height, additionalHeight}) => (
    ...
)

const props = {
    ItemComponent,
    items,
    minWidth: 200
}

...
<Grid {...props}/>

Infinite scroll

const props = {
    ItemComponent,
    items,
    minWidth,
    buffer,
    load: () => ( /* load more items */ ),
    more: Boolean, // has more
    loading: Boolean
}

<Grid {...props} />

Example

Watch here

License

MIT