Resize Plugin

Alpine's Resize plugin is a convenience wrapper for the Resize Observer that allows you to easily react when an element changes size.

This is useful for: custom size-based animations, intelligent sticky positioning, conditionally adding attributes based on the element's size, etc.

Installation

You can use this plugin by either including it from a <script> tag or installing it via NPM:

Via CDN

You can include the CDN build of this plugin as a <script> tag, just make sure to include it BEFORE Alpine's core JS file.

<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
 
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Via NPM

You can install Resize from NPM for use inside your bundle like so:

npm install @alpinejs/resize

Then initialize it from your bundle:

import Alpine from 'alpinejs'
import resize from '@alpinejs/resize'
 
Alpine.plugin(resize)
 
...

x-resize

The primary API for using this plugin is x-resize. You can add x-resize to any element within an Alpine component, and when that element is resized for any reason, the provided expression will execute with two magic properties: $width and $height.

For example, here's a simple example of using x-resize to display the width and height of an element as it changes size.

<div
    x-data="{ width: 0, height: 0 }"
    x-resize="width = $width; height = $height"
>
    <p x-text="'Width: ' + width + 'px'"></p>
    <p x-text="'Height: ' + height + 'px'"></p>
</div>

Modifiers

.document

It's often useful to observe the entire document's size, rather than a specific element. To do this, you can add the .document modifier to x-resize:

<div x-resize.document="...">

Code highlighting provided by Torchlight