search

eiriklv / react-masonry-component

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

Force Update #116

Open gaven opened 6 years ago

gaven commented 6 years ago

On a project I'm working on I need the ability to force update the layout on a click event. Is there a method on this.masonry that allows this? I have cards that expand and collapse on click.

JonesDM commented 6 years ago

Did you fix this?

gaven commented 6 years ago

@JonesDM No, I did not. I ended up using CSS columns instead. Have you found a solution?

afram commented 6 years ago

this.masonry is a reference to a Masonry instance.

does this.masonry.layout() or this.masonry.reloadItems() work for you? https://masonry.desandro.com/methods.html#layout-masonry https://masonry.desandro.com/methods.html#reloaditems

gaven commented 6 years ago

@afram No, neither of these methods worked for me. For my use case I had a card that grew when you clicked read more. After it was done growing I needed to reload the masonry instance due to the fact that card had nestled itself behind the rest of the masonry items.

tallpants commented 6 years ago

@afram the this.masonry instance doesn't have those methods at all. I'm facing the same issue as well.

afram commented 6 years ago

@tallpants that's really strange. this.masonry should be a reference to a Masonry instance. Are you able to reproduce with an example on webpackbin please?

tallpants commented 6 years ago

@afram my bad, I was trying to call it before the ref was assigned. this.masonry.layout() works, although it would probably be a good idea to put that in the docs. I don't mind making a PR with an updated README if that's okay with you.

afram commented 6 years ago

sure that would be great @tallpants :-)

jonathanpuc commented 5 years ago

If I dynamically change the size of an item will calling this.masonry.layout() cause the items to reorder accordingly to fit? Because when calling it, the items still stay the same and arent being reordered.

Mike-Timms commented 5 years ago

If I dynamically change the size of an item will calling this.masonry.layout() cause the items to reorder accordingly to fit? Because when calling it, the items still stay the same and arent being reordered.

On a project I'm working on I need the ability to force update the layout on a click event. Is there a method on this.masonry that allows this? I have cards that expand and collapse on click.

Realise this is a long time after you were working on this, but found this functionality is already built in.

Looking through the Index.js file of the module there is a prop you can add to the masonry component "enableResizableChildren".

Your Masonry component would looks something like:

`<Masonry enableResizableChildren={true} otherProps=""

// Your masonry content `

bryndyment commented 5 years ago

Could someone provide an example of calling reloadItems from within a function component?