react-masonry-component

> 编程语言

Open source

A React.js component for using @desandro's Masonry

1.5K stars0 likes1 views

Website GitHub

About

A React.js component for using @desandro's Masonry

React Masonry Component

IE8 support

if you wish to have IE8 support, v2 with React 0.14 is the highest version available.

Usage
Basic usage
Custom props
Accessing Masonry instance
Images Loaded Options
Events

Introduction:

A React.js Masonry component. (Also available as a mixin if needed)

Live demo:

hearsay.me

Usage:

The component is bundled with Masonry, so no additional dependencies needed!
You can optionally include Masonry as a script tag if there should be any reason for doing so <script src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />
To use the component just require the module.

Basic usage

npm install --save react-masonry-component

…

ES6-style modules are also supported, just use:

javascript

import Masonry from 'react-masonry-component';

Custom props

You can also include your own custom props - EG: inline-style and event handlers.

javascript

import * as React from 'react';
import Masonry from 'react-masonry-component';

const masonryOptions = {
    transitionDuration: 0
};

const style = {
    backgroundColor: 'tomato'
};

class Gallery extends React.Component {
    handleClick() {}
    render() {
        return (
            <Masonry
                className={'my-gallery-class'}
                style={style}
                onClick={this.handleClick}
            >
                {...}
            </Masonry>
        );
    }
}

export default Gallery;

Accessing Masonry instance

Should you need to access the instance of Masonry (for example to listen to masonry events) you can do so by using refs.

…

Images Loaded Options

React Masonry Component uses Desandro's imagesloaded library to detect when images have loaded. Should you want to pass options down to it then you need to populate the imagesLoadedOptions property on React Masonry Component.

This will most commonly be used when the elements in your gallery have CSS background images and you want to capture their load event. More info availabe on the imagesloaded website.

eg:

javascript

import * as React from 'react';
import Masonry from 'react-masonry-component';

class Gallery extends React.Component {
  render() {
    const imagesLoadedOptions = { background: '.my-bg-image-el' }
    
    return (
        <Masonry
            className={'my-gallery-class'}
            elementType={'ul'}
            options={masonryOptions}
            imagesLoadedOptions={imagesLoadedOptions}
        >
            

        </Masonry>
    );
  }
}

export default Gallery;

Events

onImagesLoaded - triggered when all images are loaded or after each image is loaded when updateOnEachImageLoad is set to true
onLayoutComplete - triggered after a layout and all positioning transitions have completed.
onRemoveComplete - triggered after an item element has been removed

javascript

class Gallery extends React.Component {
    componentDidMount() {
        this.hide();
    },
    handleImagesLoaded(imagesLoadedInstance) {
        this.show();
    },
    render() {
        return (
            <Masonry
                onImagesLoaded={this.handleImagesLoaded}
                onLayoutComplete={laidOutItems => this.handleLayoutComplete(laidOutItems)}
                onRemoveComplete={removedItems => this.handleRemoveComplete(removedItems)}
            >
                {...}
            </Masonry>
        )
    }
}