https://github.com/viniciusgerevini/react-responsive-mosaic
https://github.com/viniciusgerevini/react-responsive-mosaic
mason masonry mosaic reactjs
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/viniciusgerevini/react-responsive-mosaic
- Owner: viniciusgerevini
- Created: 2020-05-21T13:53:34.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-29T08:43:57.000Z (about 5 years ago)
- Last Synced: 2025-03-29T17:41:30.311Z (2 months ago)
- Topics: mason, masonry, mosaic, reactjs
- Language: JavaScript
- Homepage: https://viniciusgerevini.github.io/react-responsive-mosaic/
- Size: 486 KB
- Stars: 19
- Watchers: 4
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Responsive Drag-And-Drop mosaic
This is an example of how to implement a responsive vertical mosaic with drag-and-drop support in ReactJS.
Here is the [live demo](https://viniciusgerevini.github.io/react-responsive-mosaic/).
Here is a ["Google Keep like" example](https://viniciusgerevini.github.io/my-keep/) using the same approach.
Elements are sorted by index, as a list. This makes it easier to reorder when screen size changes. You don't need to set layouts or media-queries. Items will fit the required number of rows automatically.
This is a vertical mosaic, like the one you can find in Google Keep and Pinterest. Because of that, width is fixed (you can change the size if you want), and height is dynamic (you can define max-height).
For a more detailed explanation check this [blog post](https://thisisvini.com/responsive-mosaic-with-dnd-reactjs).
## References
This example was compiled adapting solutions from different sources.
I found the responsive grid solution using pure JS and CSS Grids in this [blog post](https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb).
I used react-dnd sortable [example](https://react-dnd.github.io/react-dnd/examples/sortable/simple) as reference for my drag-and-drop implementation.