eiriklv / react-masonry-component

A React.js component for using @desandro's Masonry
MIT License
1.44k stars 145 forks source link

Destroy/rebuild #113

Open harmeetjaipur opened 6 years ago

harmeetjaipur commented 6 years ago

Hi, I was wondering if there is a way to destroy the components and rerender Masonry cards in any way? P.S.: Great work with the package.

afram commented 6 years ago

What's your use case @harmeetjaipur?

arildm commented 3 years ago

I needed this to react to updated options, specifically horizontalOrder. I could do it by creating a ref and calling .masonry.destroy():

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

export default class ImageList extends React.Component {
  constructor(props) {
    super(props);
    this.masonryRef = React.createRef();
  }

  componentDidUpdate(props) {
    this.masonryRef.current.masonry.destroy();
  }

  render() {
    return (
      <Masonry ref={this.masonryRef} options={this.masonryOptions()}>
        {this.items}
      </Masonry>
    );
  }
}

Edit: This "solution" introduced more problems than it solved, and I undid it. I'm leaving it posted, hoping that someone can improve on it.