Resize Detection

Alpine.js Resize Detection: Your App’s Size Sensor! 📏

The Magic Story: The Shape-Shifting House

Imagine you have a magic house that knows when it’s getting bigger or smaller. When mom opens the curtains wide, the house whispers, “I’m bigger now!” When dad closes the garage door, it says, “I’m a bit smaller!”

That’s exactly what Alpine.js Resize Detection does for your website! It watches parts of your page and tells you when they change size. Pretty cool, right?

What You’ll Learn

1. Element Resize Detection — Know when a box on your page changes size
2. Viewport Resize Detection — Know when the whole window changes size

Let’s dive in!

1. Element Resize Detection 🎁

The Analogy: A Growing Picture Frame

Think of a picture frame that can stretch and shrink. You want to know every time it changes so you can adjust the picture inside!

What Is It?

Element Resize Detection watches one specific thing on your page (like a box, an image, or a card) and tells you when its size changes.

Why Do We Need It?

• Adjust content when a sidebar opens/closes
• Resize charts when their container changes
• Update layouts dynamically

How It Works

Alpine.js uses the x-resize directive. Here’s the magic spell:

<div x-data="{ width: 0, height: 0 }"
     x-resize="width = $width; height = $height">
  <p>I am {{ width }}px wide!</p>
  <p>I am {{ height }}px tall!</p>
</div>

Breaking It Down

Real Example: Responsive Card

<div x-data="{ w: 0 }"
     x-resize="w = $width"
     class="card">
  <span x-show="w < 300">📱 Small</span>
  <span x-show="w >= 300">🖥️ Big</span>
</div>

When the card is less than 300px, it shows a phone emoji. When bigger, a computer!

graph TD
    A["Element on Page"] --> B{Size Changed?}
    B -->|Yes| C["x-resize Fires"]
    C --> D["Update $width & $height"]
    D --> E["Your Code Runs!"]
    B -->|No| F["Keep Watching..."]

Quick Tips for Element Resize

• Works on any HTML element
• Uses the browser’s ResizeObserver (super efficient!)
• Only fires when size actually changes

2. Viewport Resize Detection 🪟

The Analogy: Your Room’s Window

Imagine the window in your room. When you pull the curtains open wider, more light comes in. You want to know when this happens so you can put on sunglasses!

The viewport is your browser window — the part you see on screen.

What Is It?

Viewport Resize Detection watches the whole browser window and tells you when the user resizes it.

Why Do We Need It?

• Switch between mobile and desktop layouts
• Show/hide navigation menus
• Adjust font sizes for readability

How It Works

Add the .window modifier to listen to the whole window:

<div x-data="{ vw: 0, vh: 0 }"
     x-resize.window="vw = $width; vh = $height">
  <p>Window: {{ vw }} x {{ vh }}</p>
</div>

The Magic Modifier: .window

Real Example: Mobile Menu Toggle

<div x-data="{ screenW: 0 }"
     x-resize.window="screenW = $width">

  <nav x-show="screenW >= 768">
    Desktop Menu
  </nav>

  <button x-show="screenW < 768">
    ☰ Mobile Menu
  </button>
</div>

On big screens (768px+), show the full menu. On small screens, show a hamburger button!

graph TD
    A["User Resizes Window"] --> B["x-resize.window Fires"]
    B --> C["Update $width & $height"]
    C --> D["Check Screen Size"]
    D --> E{Width >= 768?}
    E -->|Yes| F["Show Desktop Nav"]
    E -->|No| G["Show Mobile Button"]

Element vs Viewport: Side by Side

Putting It All Together

Here’s a complete example combining both:

<div x-data="{
  boxW: 0,
  screenW: 0
}">

  <!-- Watch the window -->
  <div x-resize.window="screenW = $width">
    Screen: {{ screenW }}px
  </div>

  <!-- Watch a specific box -->
  <div x-resize="boxW = $width"
       class="resizable-box">
    Box: {{ boxW }}px
  </div>

</div>

Remember This!

1. x-resize = watches ONE element
2. x-resize.window = watches the WHOLE window
3. $width and $height = magic size variables
4. Both use the browser’s efficient ResizeObserver

You Did It! 🎉

Now you know how to:

• Detect when any element changes size
• Detect when the browser window changes size
• Use $width and $height to get the new sizes
• Build responsive, smart interfaces!

Your website can now feel when things change shape — just like that magic house from our story!

Pro Tip: Resize detection is lightweight and efficient. Don’t be afraid to use it wherever you need dynamic layouts!