React.js and Isotope.js

Question

I\'m checking out React.js and trying to figure out how this library can work together with Isotope.js. The documentation of React says that it plays nicely with other libra

Answer 1

Here's an updated version of the above code posted by James:

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import Isotope from 'isotope-layout';

// Container for isotope grid
class ItemGrid extends PureComponent {
    constructor(props) {
        super(props);
        this.state = { isotope: null };
    }

    render() {
        return(
            

                {this.props.children}
            
        )
    }

    // set up isotope
    componentDidMount() {
        const node = ReactDOM.findDOMNode(this);
        if (!this.state.isotope) {
            this.setState({
                isotope: new Isotope( node )
            });
        } else {
            this.state.isotope.reloadItems();
        }
    }

    // update isotope layout
    componentDidUpdate() {
        if (this.state.isotope) {
            this.state.isotope.reloadItems();
            this.state.isotope.layout();
        }
    }
}

export default ItemGrid;

Usage:

Just pass the items you want to keep inside isotope into the ItemGrid component as children:

    {data.map(object => (
      
    ))}

Alternatives

If you can, consider using react-masonry-component.