React Bricks

React Bricks is a React Masonry Framework with infinite scroll feature, currently it leverages bricks.js. This framework is plug and play used to deliver "Pinterest" type experience.

Demo

Demo link - https://react-bricks.herokuapp.com/

Feedback

For Feeback on any enhancement requests, please reach out on shashankmendiratta@outlook.com

Install

$ npm install react-bricks-infinite

Usage

import React from "react";
import ReactBricks from "react-bricks-infinite";

class Bricks extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bricks: this.getBricks(),
            reRender: false,
            containerId: "bricks-container-app",
            hasMoreBricks: true
        }

    }
     getBricks = () => { 
         let results = null;
        results = this.elements.map(({key, value}, i) => {
            return (
                <div key={key}
                      className="card">
                      <h1>{i}</h1>
                      <p>{value}</p>
                </div>     
            );
        });
        return results;
    }
     render() {
        return(
            <div className="app">
                <ReactBricks
                containerId = {this.containerId}
                loadMoreBricks = {this.loadMore}
                hasMoreBricks  = {this.state.hasMoreBricks}
                reRender = {this.state.reRender}
                bricks= {this.state.bricks}
                defaultLoaderStyle = {this.defaultLoaderStyle}
                />
            </div>
        );
    }
}

Props

containerId (node or CSS selector)
bricks child Components (grid items)
hasMoreBricks boolean
sizes array
useWindowForScroll boolean
reRender boolean
loaderComponent
defaultLoaderStyle
style

containerId

Id of the container of the grid which will contain the bricks/grid items, Default value is containerId = "bricks-container"

 return(
            <div>
                <ReactBricks
                containerId = "bricks-container"
                .
                .
                .
                />
            </div>
        );

bricks

bricks are the list of child items which will be part of the grid

 return(
            <div>
                <ReactBricks
                bricks= {this.state.bricks}
                .
                .
                .
                />
            </div>
        );

hasMoreBricks

This is type = boolean field required to be true in case their are more bricks/items to be loaded in the grid. If false Event listeners asscoiated are removed . By default it has value false

sizes

Its an array of objects describing the properties of grid container at different window breakpoints.

How does each object looks like :-

{ mq: '768px', columns: 3, gutter: 25 }

// mq      - the minimum viewport width (String CSS unit: em, px, rem)
// columns - the number of vertical columns
// gutter  - the space (in px) between the columns and grid items

By default the sizes value is

 sizes= [
        {columns: 2, gutter: 20},
        {mq: '768px', columns: 3, gutter: 25},
        {mq: '1024px', columns: 5, gutter: 40}
    ]

How to use it -

const sizes= [
        {columns: 2, gutter: 10},
        {mq: '768px', columns: 2, gutter: 35},
        {mq: '1024px', columns: 8, gutter: 60}
    ] 

    return(
            <div>
                <ReactBricks
                .
                .
               sizes = {sizes}
                .
                .
                />
            </div>
        );

useWindowForScroll

This is type = boolean If true Scroll listeners are attached to window , in case of false it will attach to the components parentNode. By default it is true

reRender

This is type = boolean If true reRender will readjust all the bricks in the grid container. This is helpful in case of a window resize

.
.
constructor(props) {
    .
    .
     window.onresize = () => {
           this.setState({reRender: true});
        }
        .
        .
}

render(){
    return(
            <div>
                <ReactBricks
                .
                .
               reRender = {this.state.reRender}
                .
                .
                />
            </div>
        );   
}

What is happening above is when on a resize we send props reRender as true it will repack all the bricks depending on the new window size and the breakpoint mentioned in the sizes props above

loaderComponent

Your own custom loader component can be passed as props to ReactBricks. By default the loader is a spinner.

Default Loader

return(
            <div>
                <ReactBricks
                .
                .
               loaderComponent = {<CustomLoader className="custom-loader"/>}
                .
                .
                />
            </div>
        );

else , you can customize the default Loader using defaultLoaderStyle

defaultLoaderStyle

Currently the spinner has by default below properties

spinnerSize = 28(in px) duration: 1333 (in ms) color: multicolor (4 colors)

In case the default spinner properties needs to be changed, it can be done as below

 const defaultLoaderStyle = {
            spinnerSize: 64,
            duration: 2000,
            color: "#ff0000"
        }
 return(
            <div>
                <ReactBricks
                .
                .
               defaultLoaderStyle = {defaultLoaderStyle}
                .
                .
                />
            </div>
        );

style

Custom inline styles can be passed which would applied to the grid container . By default it is {}

 const style = {
            background: "#000000",
        }
 return(
            <div>
                <ReactBricks
                .
                .
               style = {style}
                .
                .
                />
            </div>
        );

License

MIT.

shashankraider/react-bricks