React Image Gallery

I really like the idea of giving back to the community, and putting out some open source React.js components based on projects that come up during my daily work stuff. Recently I’ve been looking around for a good “masonry” style image gallery, and couldn’t find one that meets my needs, so I decided it would be as good a time as ever to experiment with creating my first (individually published) component.

You can check out the demo on the public github page, but here’s a quick overview…

React Image Gallery Lightbox Masonry

React Image Gallery Lightbox Masonry

Nothing too special yet, but it’s a start! Check out the source code… https://github.com/dschoon/img-gallery

 

  • theTechnaddict

    Nice work – I’d love to read about how you have gone about it.

  • theTechnaddict

    Am I right in thinking that the layout is dependent on the css for the responsive masonry effect? If so what do you suggest for a fallback (react-mansonry for instance?)

  • CCUSchoon23

    Sorry @theTechnaddict:disqus, I just noticed your comments…

    Yes, these use the column-count CSS property (http://bit.ly/2c50HFM) and responsive media queries (http://bit.ly/2bXRjAT) to handle various screen sizes.

    I haven’t looked too closely at the react-masonry repo, but I would suggest checking out the react-stonecutter (http://bit.ly/2cAlBis) masonry gallery because that is well done.

Skills

, ,

Posted on

November 18, 2015