Is it possible to implement a Filter?

[Phoi-Hoa-Nguyen]

Hey!
This library(+ lightbox) is so far really usefull for me and I want to thank you for that!
I would like to ask, if it´s possible to built or add a custom "filter"/"isotope" for the "react-photo-album" library?

Something like this:
https://codesandbox.io/s/test-react-isotope-forked-id3ms?file=/src/App.js
https://codesandbox.io/s/shy-shadow-p7zx2?file=/src/IsotopeHandler.js

My goal is it to filter(via checkboxes) the showing images with some "tags"/key property from the created photo(array) with these dynamic changes (isotope) like the examples above. Do you think there is a way to combine it with the "react-photo-album"?
I would appreciate any advice or examples! :)

Thanks in advance!

[igordanchenko]

Hi there!

First of all, thank you for your patronage, and if you enjoy using my libraries, please consider showing your support by giving them a star here on GitHub.

I don't believe it's currently possible to integrate react-isotope with react-photo-album since both libraries use their own unique layout rendering approaches.

Implementing tags and filters is pretty straightforward. You can add a tags prop to your photo objects and then filter them before passings the photos array to the PhotoAlbum.

const photos = allPhotos.filter((photo) => Boolean((photo.tags || []).find((tag) => tags.includes(tag))));

// ...

<PhotoAlbum 
  photos={photos} 
  // ...
/>

As to isotope-like animations, the implementation is doable but very much non-trivial. I put together a demo of what, I'm assuming, you are trying to build.

https://codesandbox.io/s/react-photo-album-101-f6npyj?file=/src/App.js

Please let me know if you have any other questions.

P.S. The above demo is a proof-of-concept and hasn't been thoroughly tested.

[Phoi-Hoa-Nguyen]

Hey!

Thanks for the reply! Yes I forget to gave your Library a star :D But now its done!
updated: Well I checked everything and I really miss something in the "photos.js" component. Now everything works fine!

Thanks so far, mate!