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

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.