Hey all! How would you build an image gallery with React Hooks? Here's how I would do it! (You can use here! and Edit Here!)
The main things to look at:
- This is written in Typescript, to assist the gist also contains the same code in JavaScript.
- The types!
- Our gallery starts with an object for each
Image
, here containing the basic info of aurl
and atitle
. - We can search for images by an arbitrary tag, and, and our images come from the server as an
ImageResponse
. This contains an array ofimages
, the searchedtag
, and a number representing the total number of pages available (totalPages
). - We represent a cache of the searched tags and the returned images with the
TaggedImages
type. This is aRecord
, which is an Object where the keys are the tag strings and the values are arrays of the returnedImage
arrays, indexed by page number.
- Our gallery starts with an object for each
- Our
useGallery
hook calls a few important hooks:- First: It calls
useState
to track thepageNumber
andtag
. - Second: It calls
useReducer
to create aTaggedImages
cache, and a function to update it with anImageResponse
. - Third: It calls
useEffect
, and in the effect it fetches the images for the gallery'scollectionUrl
,tag
, andpageNumber
. We pass a booleanshouldLoad
in addition to those dependencies in the effect's dependency array, to indicate the presence of a cached value and if we should load the data when the effect is run. Once the data loads, we get anImageResponse
and send it through our reducer!
- First: It calls
The example app in the CodeSandbox doesn't implement a loading indicator, why not see if you can fork it and implement one! If galleries or kittens aren't your thing, but you like this style, leave a comment with what hooks snippet I should write next!
Top comments (0)