ByteSize: Infinite Scroll with Flask and React Pt.2
How you can easily integrate an Unsplash infinite image grid using Material-UI
In our last tutorial, I took a walk through how to set up the back and front end of an infinite scroll component. While functional, there was still a little bit to be desired in terms of styling for the component. This time around, we’ll be integrating the Material-UI library to help us create a visually appealing layout. We’ll also get into a bit of custom styling of our Material-UI elements to add some hover-selector styles.
If you want to check out the previous article you can find it here, and the repo for the project is here!
Material-UI
Material-UI (MUI) is an incredibly easy-to-use React component and styling library that allows you to quickly get up and running with designs based on Google’s Material Design style guidelines. MUI gives you predesigned components that you can quickly integrate into your site to save you the time of writing everything from scratch. You can install it in the command line of your project with:
npm i @material-ui/core
The Code
We’ll start off by the components we’ll be using at the top of our Infinite Scroll component file (in app\static\src\InfiniteScroll.jsx)
Next we’ll create the GridList and GridListTile components in the returned portion of the InfiniteScroll function.
Feel free to play around with the cellHeight and cols (columns) attributes for your own projects, the cell height obviously adjusting the height and width of the image, and columns adjusting how many images are displayed per row.
The cols and rows arguments in GridListTile allow you to set the height and width of our images as increments of the cellHeight from the GridList component. This let’s you make certain images take up more space than others, giving a nice aesthetic.
I used the Modulo (%) operator in a ternary statement to make it that images will have the width of three slots on the tenth photo, and two slots on every twentieth.
We will also need to include the styling for these elements above as well.
The gridList class can be adjusted based on how wide you want the overall grid to be.
With that finished our feed currently looks like this:
While this is great, the coloring of the images can be a little conflicting and overwhelming, lacking a bit of coherence. We can change this by adding some grayscale to desaturate the colouring of the images and bringing it to a similar level. We can then make a CSS hover selector that removes the grayscale when a user navigates over a picture.
We can make these adjustments using the image class we already defined in our image tag using the makeStyles object.
Finished
And with that our Infinite Grid is finished!
As always thanks for reading, and be sure to check in for the next tutorial where we’ll start getting into how to filter an infinite scroll with user input by using chips, as well as using search!
