useIsMobile

The useIsMobile hook returns whether the current viewport is below the mobile breakpoint used by React Core shell components.

Import

import { useIsMobile } from "@cfa/react-core";

Usage

Responsive Rendering

function Example() {
  const isMobile = useIsMobile();

  return (
    <div>{isMobile ? <Button size="sm">Open filters</Button> : <aside>Filter controls</aside>}</div>
  );
}

Responsive State

function Example() {
  const isMobile = useIsMobile();
  const [isOpen, setIsOpen] = React.useState(false);

  React.useEffect(() => {
    if (isMobile) {
      setIsOpen(false);
    }
  }, [isMobile]);

  return <Button onPress={() => setIsOpen((open) => !open)}>{isOpen ? "Close" : "Open"}</Button>;
}

API

useIsMobile(): boolean

Behavior

• Returns true when the viewport width is below 768px.
• Updates when the viewport crosses the mobile breakpoint.
• Returns false during the initial render before browser viewport state is available.