Show and Hide Items with a React App with react-isotope

Image for post
Image for post
Photo by Mael BALLAND on Unsplash

The react-isotope library lets us show and hide items by writing a few functions.

In this article, we’ll look at how to add filters for our items with React.

Install

We can install it by running:

npm install --save react-isotope

Adding Filters

We can add filters by adding the layout.

We add the cardsLayout.json to let us control how the items are filtered:

[
{
"id": "a",
"row": 0,
"col": 0,
"w": 1,
"h": 1,
"filter": ["test", "chart"]
},
{
"id": "b",
"row": 0,
"col": 1,
"w": 1,
"h": 1,
"filter": ["test1", "tile"]
},
{
"id": "c",
"row": 0,
"col": 3,
"w": 1,
"h": 1,
"filter": ["test", "chart"]
},
{
"id": "d",
"row": 1,
"col": 0,
"w": 1,
"h": 1,
"filter": ["test1", "tile"]
},
{
"id": "e",
"row": 1,
"col": 1,
"w": 1,
"h": 1,
"filter": ["test", "tile"]
},
{
"id": "f",
"row": 1,
"col": 2,
"w": 1,
"h": 1,
"filter": ["test1", "chart"]
},
{
"id": "h",
"row": 2,
"col": 0,
"w": 1,
"h": 1,
"filter": ["test1", "chart"]
}
]

Then in our React component, we write:

import React from "react";
import IsoTopeGrid from "react-isotope";
import cardsLayout from "./cardsLayout.json";
const filtersDefault = [
{ label: "all", isChecked: true },
{ label: "test", isChecked: false },
{ label: "test1", isChecked: false },
{ label: "chart", isChecked: false },
{ label: "tile", isChecked: false }
];
export default function App() {
const [filters, updateFilters] = React.useState(filtersDefault);
const onFilter = (event) => {
const {
target: { value, checked }
} = event;
updateFilters((state) =>
state.map((f) => {
if (f.label === value) {
return {
...f,
isChecked: checked
};
}
return f;
})
);
};
return (
<div className="App">
<div className="filter-container">
{filters.map((f) => (
<div className="filter" key={`${f.label}_key`}>
<input
id={f.label}
type="checkbox"
value={f.label}
onChange={onFilter}
checked={f.isChecked}
/>
<label htmlFor={f.label}>{f.label}</label>
</div>
))}
</div>
<div className="container">
<IsoTopeGrid
gridLayout={cardsLayout}
noOfCols={3}
unitWidth={200}
unitHeight={100}
filters={filters}
>
{cardsLayout.map((card) => (
<div key={card.id} className={card.filter[0]}>
{card.id}
</div>
))}
</IsoTopeGrid>
</div>
</div>
);
}

The IsoTopeGrid lets us display the filtered items in a grid.

Above that, we render the filter types into the checkboxes.

Once we check that filters, then the onFilter method to call the updateFilters method to set the callback to match the value.

We filter the value from the JSON by checking if the label is in the filter array.

Now when we click on the checkboxes, we show the items with the given labels.

The items will be animated as they’re updated.

Conclusion

We can add filters for items easily with the react-isotope library.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store