Need Public Method

    @aerni/alpine-resize

    1.1.0 • Public • Published

    NPM Version Build Size License

    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/alpine-resize@1.x.x/dist/cdn.min.js"></script>
    
    <!-- Alpine Core -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/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 elements 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>

    Keywords

    none

    Install

    npm i @aerni/alpine-resize

    DownloadsWeekly Downloads

    85

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • aerni