react masonry

ReactJs layout library.

It places elements in optimal positions by stacking them from left to right and from top to bottom.

No deps besides ReactJs ⚛️.

See Demo.

Usage

Place any elements inside the Masonry component. They will be cloned, measured and positioned.

Elements rendered inside Masonry must be DOM elements.

import { Masonry } from 'react-masonry'

return (
  <Masonry>
    <img src="helloWolrd.jpg" />
    <div className="box">some text</div>
    <img src="foo.png" />
  </Masonry>
)