aerni / alpine-resize

Trigger JavaScript when an element is resized.

---

This package has been archived in favor of Alpine's Resize plugin.

---

Alpine Resize

This is a convenience wrapper around ResizeObserver that allows you to easily run code whenever an element is resized. One possible use case is to dynamically set the sizes attribute on the <source> tag of a <picture> element.

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 Resize -->
<script defer src="https://cdn.jsdelivr.net/npm/@aerni/[email protected]/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Via NPM

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

npm install @aerni/alpine-resize

Then initialize it from your bundle:

import Alpine from 'alpinejs'
import resize from '@aerni/alpine-resize'

Alpine.plugin(resize)

Usage

Add x-resize to any element within an Alpine component. The provided expression will execute as soon as the element is resized.

In this example, the element will show as soon as it is resized.

<div x-data="{ resized: false }" x-resize="resized = true">
    <div x-show="resized">
        This element shows as soon as it is resized
    </div>
</div>

You can also provide a callback to access the ResizeObserverEntry to do fancy things like changing an element's font size based on its width.

<div
    x-data="{
        width: 0,
        minFontSize: 15,
        maxFontSize: 50,
    }"
    x-resize="resizeObserverEntry => {
        width = resizeObserverEntry.contentRect.width
    }"
    :style="{
        'font-size': `${Math.min(maxFontSize, Math.max(minFontSize, width * 0.05))}px`,
    }"
>
    The font-size of this element will change based on its width
</div>

alpine-resize's Issues

Add feature detection for ResizeObserver

Hi again! I just had a thought: Shouldn't this directive probably do some feature detection before initializing the ResizeObserver? That way it would stay "progressive enhancement" and wouldn't break sites on older browsers. Anything like this:

if (typeof window.ResizeObserver !== 'function') return

or

if (!"ResizeObserver" in window) return;