How to make Isotope work in a Gatsby site
Isotope.js implementation for grid filtering on a Gatsby generated React.js site.
In my quest to learn Gatsby.js and the underlying React.js library, I was porting my existing site into a Gatsby site. I had finished the basics and was turning towards the more complex parts of my site.
This is when I hit the wall, figuratively speaking. Isotope.js is an external javascript resource that I have used to animate the filtering of articles grid on my static site, and connect it to the component using jQuery. Gatsby being React based, I had to write a component which would take care of rendering as well as the callbacks required to sort/filter using Isotope. This is how I got it to work.
Initial Setup
Before we delve into the solution, it’s better to understand the React basics that go into making it work.
- A React component defined as an ES6 class usually implements event handler as a method of that class. This method has to be ‘bind’ed in the constructor for ‘this’ to work.
- Toggle the status of the buttons using the state of the component. The function this.setState() is used for this purpose.
- Style can be imported from CSS/SCSS files into the React component and used as shown below:
Say we have 2 groups of items — Tech and Personal — which would mean we should have three filter states — All, Tech and Personal respectively. Hence, a React component which will have 3 buttons, each having a callback that sets the state of those buttons, can be written as:
npm.The GridFilter component renders a group of 3 buttons. Each button has a callback function for handling the click event. The callback functions are binded in the constructor (without which the call this.handleClick is not possible). The state variable is used to toggle the status of the buttons upon callback.
The 3 buttons as well as the <div> element containing them have classes - isChecked, filtersButton and filtersButtonGroup respectively. These are used to design the look of the buttons.
What happens when you click a button?
Does the button change its look?
How does the user know the state of each button?
At a bare minimum, the button that is clicked should look different compared to the other buttons in the grouping (this is kind of self explanatory).
Note that the state variable has 3 variables in it. These store the status of the 3 buttons - All, Tech and Personal. Right now, only the status will get toggled on clicking the buttons. But they are supposed to do something more i.e., filter the posts in the grid and animate the action. This is where Isotope comes in.
Install/Setup Isotope.js
First, install isotope using npm (or bower).
npm install --save isotope-layoutThen import it into your GridFilter component.
import Isotope from "isotope-layout/js/isotope";If you have a pure HTML page containing a grid with the following hierarchy…
In order to use Isotope on such a grid, initialize Isotope using the class names grid and grid-items.
For filtering, you would call the arrange() method on the Isotope variable.
Pretty simple, right? How do we go about doing the same in our React component defined above?
Integrating Isotope into React
The changes to the React component are done in the 3 handleClick functions. See below:
Each of the functions has called the arrange() method to filter the grid items as required. But why is there an initialization done before every call? Ideally, this code should be in the constructor, right?
${styles.articlesTiles} and grid item is ${styles.col}.Well, I thought so too. And my first implementation had the initialization code in the constructor. But for some reason it didn’t work. I used to get an ‘undefined’ error upon clicking any of the 3 filter buttons. So I moved it into the ComponentDidMount() function thinking it would work from there. But it didn’t either.
Finally, I came up with the idea of initializing before use in each of the 3 handleClick functions. You can see that the initialising code is called only when the Isotope is undefined, meaning it only runs once.
Now, you can insert the GridFilter React component into any of your pages. All you need to do is supply the class names for your grid and grid-item in the initialization code of the component!
Ps: If you do get the Isotope initialization to work in the constructor, let me know!
Originally published at www.amithraravi.com on January 23, 2019.
