# useCloseMobileMenuOnResize

Closes a mobile menu or overlay when the viewport is resized.

## Installation

```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/use-close-mobile-menu-on-resize.json
```

[Registry JSON](https://reactdocs.canceydejean.dev/r/use-close-mobile-menu-on-resize.json)

## Preview

```tsx
import { useState } from "react";

import { Button } from "@/components/ui/button";

import { useCloseMobileMenuOnResize } from "@/hooks/use-close-mobile-menu-on-resize";

export function Preview() {
  const [isOpen, setIsOpen] = useState(false);

  useCloseMobileMenuOnResize(() => setIsOpen(false));

  return (
    <div className="flex flex-col items-center gap-3 text-center">
      <Button onClick={() => setIsOpen((open) => !open)}>
        {isOpen ? "Close menu" : "Open menu"}
      </Button>
      <p className="text-sm text-muted-foreground">
        {isOpen ? "Menu is open." : "Menu is closed."} Resize the window to close it automatically.
      </p>
    </div>
  );
}
```


## Source

### hooks/use-close-mobile-menu-on-resize.ts

```ts
"use client";
import { useEffect } from "react";

export const useCloseMobileMenuOnResize = (onClose: () => void) => {
  useEffect(() => {
    const handleResize = () => {
      onClose();
    };

    window.addEventListener("resize", handleResize);

    // Cleanup function
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [onClose]);
};
```



## Usage

Pass a callback that runs on every `window` `resize` event. Typical use: dismiss a sheet, drawer, or
mobile nav when the user widens the viewport so the desktop layout takes over.

```tsx
import { useCloseMobileMenuOnResize } from "@/hooks/use-close-mobile-menu-on-resize";

export function MobileNav({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  useCloseMobileMenuOnResize(() => onOpenChange(false));

  return open ? <nav>{/* mobile links */}</nav> : null;
}
```

Pair with [`useIsMobile`](/utilities/use-mobile) when you only want to close after crossing the mobile
breakpoint instead of on every resize tick.