React Infinite Grid

Hint: Pay attention to the DOM.

Installation

npm install --save react-ingrid

Features

• windowing - render only visible items
• relative positioning - all items position relative each other
• supports Immutable.js

Usage

import Ingrid from 'react-ingrid'

// Regular array or Immutable.js List
const items = [
    { id:1, foo: 'bar' },
    ...
]

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

const props = {
    ItemComponent,
    items,
    itemWidth: 100,
    itemHeight: 100,
    load: () => ( /* load more items */ ),
    more: Boolean, // has more
    loading: Boolean
}

...
<Ingrid {...props}/>

// or with decorator
import { ingrid } from 'react-ingrid'
const Grid = ingrid(props => props)(ItemComponent)

Props

• ItemComponent
• items
• itemWidth
• itemHeight
• load
• more
• loading
• paddingTop
• paddingLeft
• onScrollChange
• PreloaderComponent
• preloaderHeight
• isShowingPreloader
• shouldPrerenderAll
• parentWidth
• parentHeight

ItemComponent (required)

Use your :sparkles:imagination:sparkles: to define how your grid items should look.

This component gets:

• data - The data to render (plain object or Immutable.js)

It should return a react component. For example:

const ItemComponent = ({data}) => (
    <div>
        <h1>{data.title}</h1>
    </div>
)

items (required)

An array (or Immutable.js List) of items to display. For example:

const items = [
    {id:1, foo: 'bar'},
    ...
]

itemWidth & itemHeight (required)

ItemComponent's width and height.

For example, to render adaptive Ingrid (like with CSS media queries) you can do:

...

const [ itemWidth, itemHeight ] =
    windowWidth >= 320 && windowWidth < 376 ? [ 200, 200 ] :
    windowWidth >= 568 && windowWidth < 667 ? [ 300, 300 ] :
    windowWidth >= 1435 && windowWidth < 1445 ? [ 400, 400 ] :
    [ 500, 500 ]

const props = {
    ...
    ItemComponent: UserPhoto,
    itemWidth,
    itemHeight,
    ...
}

return (
    <Ingrid {...props} />
)

...

load (required)

Function that loads more items when user scrolls. Ingrid will call "load" every time user scrolls a page (unless you provide the more prop). You design how items are modelled. Therefore, it's your responsibility to load and sort items in your store.

more (optional, boolean)

Ingrid loads items when user scrolls. You must provide a boolean to tell whether you have more items to load.

By default, it is always true.

loading (required, boolean)

Normally you don't want to send multiple load requests at the same time. To tell Ingrid not to do it provide a boolean.

Also, you might want to show a preloader while loading new items. For example:

const ImagesGrid = ({ onLoadmore, loading }) => {
    const props = {
        ...
        load: () => onLoadmore(),
        loading,
        ...
    }

    return (
        <Ingrid {...props} />
    )
}

class App extends React.Component {
    ...
    render() {
        const { loading } = this.props
        return (
            {loading ?
                <ImagesGrid /> :
                this.renderLoadmoreSpinner()
            }
        )
    }
}

paddingTop (optional)

You might want to add extra padding on top. This is the best place to do it :wink:

Note: Do not do it via CSS — Ingrid will not be able to calculate the top of the container, and everything will shake.

paddingLeft (optional)

The same is as the paddingTop but for the left side

getPaddingTop (optional)

This function is called when Ingrid is scrolled. It has the following signature:

function getPaddingTop(value)

where:

• value - current paddingTop, if it > 0 or paddingTop prop then content was scrolled

You might want to use it to hide/show some element (hide a menu). For example:

const ImagesGrid = ({ handleGridScroll }) => {
    const props = {
        ...
        getPaddingTop: (value) => handleGridScroll(value),
        ...
    }

    return (
        <Ingrid {...props} />
    )
}

// ImagesActions.js
export const handleGridScroll = value => (dispatch, getState) => {
    const menuHeight = 300
    const { isMobile } = getState()

    if (isMobile && (value > menuHeight)) {
        dispatch({
            action: 'HIDE_MENU'
        })
    }
    if (isMobile && (value < menuHeight)) {
        dispatch({
            action: 'SHOW_MENU'
        })
    }
}

class App extends React.Component {
    ...
    render() {
        const { isShowingMenu } = this.props
        return (
            ...
            {isShowingMenu ?
                <Menu /> : ''
            }
            ...
        )
    }
}

isShowingPreloader (optional, boolean)

Ingrid shows a preloader while loading new items. We don't recommend to disable this behaviour. The better way is to create your own preloader and pass it through PreloaderComponent prop.

By default, it is true.

PreloaderComponent (optional)

If you don't happy with our default preloader use your :sparkles:imagination:sparkles: to implement your own.

const PreloaderComponent = () => (
    <div>
        <h1>Much loading. So wait.</h1>
    </div>
)

preloaderHeight (optional)

You can add more space for your preloader here.

shouldPrerenderAll (optional)

If you want to render your grid on the server side you should set this propery true. In this case all items will be rendered on the initial render call.

parentWidth & parentHeight (optional)

The parentComponent's width and height. Use this to control the height and width of the Ingrid component, useful when ancestor components can be programatically resized.

Examples

• Babex.com
• Demo

License

MIT