React Isotope

Isotope.jsx

/** npm install isotope-layout clsx **/

import IsotopeLayout from "isotope-layout";
import React from "react";
import clsx from "clsx";

const IsotopeContext = React.createContext();

export const Isotope = ({ children, ...props }) => {
  const isotope = React.useRef();
  const [filterKey, setFilterKey] = React.useState("*");

  const containerRef = React.useRef();

  React.useEffect(() => {
    isotope.current = new IsotopeLayout(containerRef.current, {
      itemSelector: ".isotope-filter-item",
      ...props,
    });

    return () => {
      isotope.current?.destroy();
    };
  }, []);

  React.useEffect(() => {
    if (isotope.current) {
      filterKey === "*"
        ? isotope.current.arrange({ filter: `*` })
        : isotope.current.arrange({ filter: `.${filterKey}` });
    }
  }, [filterKey]);

  const handleFilterKeyChange = (key) => () => setFilterKey(key);

  return (
    <IsotopeContext.Provider
      value={{
        isotope,
        filterKey,
        handleFilterKeyChange,
        containerRef,
        ...props,
      }}
    >
      {children}
    </IsotopeContext.Provider>
  );
};

export const IsotopeContainer = ({
  as: Component = "div",
  children,
  ...props
}) => {
  const { containerRef } = React.useContext(IsotopeContext);
  return (
    <Component {...props} ref={containerRef}>
      {children}
    </Component>
  );
};

export const IsotopeFilter = ({
  as: Component = "button",
  filter = "*",
  children,
  ...props
}) => {
  const { filterKey, handleFilterKeyChange } = React.useContext(IsotopeContext);
  return (
    <Component
      {...props}
      className={
        typeof props.className === "function"
          ? props.className(filterKey === filter)
          : clsx(props.className, filterKey === filter ? "active" : null)
      }
      onClick={handleFilterKeyChange(filter)}
    >
      {children}
    </Component>
  );
};

export const IsotopeItem = ({ filter, children, ...props }) => (
  <div
    {...props}
    className={clsx("isotope-filter-item", filter, props.className)}
  >
    {children}
  </div>
);

IsotopeExample.jsx

export default function IsotopeExample() {
  return (
    <Isotope>
      <div>
        <IsotopeFilter filter="*">All</IsotopeFilter>
        <IsotopeFilter filter="group-1">Group 1</IsotopeFilter>
      </div>
      <IsotopeContainer>
        <IsotopeItem filter="group-1">Group 1 - Item 1</IsotopeItem>
        <IsotopeItem filter="group-2">Group 2 - Item 1</IsotopeItem>
      </IsotopeContainer>
    </Isotope>
  );
}