neptunian / react-photo-gallery

React Photo Gallery
http://neptunian.github.io/react-photo-gallery/
Other
1.97k stars 310 forks source link

extract out utility functions to create less ui-opinionated library #159

Open josephong opened 4 years ago

josephong commented 4 years ago

I was going to fork the repository to create our own custom UI, but here's an idea: is there a plan to extract out the underlying utility functions that Gallery uses? This library would essentially be a UI-agnostic layout engine which would enable people to build custom interfaces more easily.

For example, one such custom interface is a justified grid where clicking on an image makes an area pop up under the row of the selected image. You can see similar behavior on some stock photography websites (Google Images used to do this as well). This is currently impossible with the Gallery component as specified.

However, all the requisite calculations exist in the codebase to create such a UI. In particular, computeRowLayout emits the computed dimensions of the images. If this function was exposed to the user (maybe with an additional grouping by row, instead of just a flat list of images), it would be easy enough for the consumer to render their own image tags in a div, and place their own click handlers to trigger new UI elements to appear in the flow of the grid.