Haki Dla Alpine.js

Moduł Alpine Hooks to zbiór haczyków do użytku z Alpine.js. Ten pakiet zawiera wiele haków używanych do poprawy doświadczenia dewelopera (DX) dla typowych zadań Alpine.

Minęło trochę czasu, odkąd wydałem coś na @Alpine_JS, więc oto nowy pakiet: alpejskie haczyki. Zainspirowane haczykami w React, te magiczne funkcje zapewniają przydatnych pomocników, których używam w tonie projektów. Sprawdź!

— Ryan Chandler (@ryangjchandler) June 6, 2023

https://t.co/FMTP9WO3tE W chwili pisania tego tekstu moduł ma następujące haczyki:

• $useHover() - reaguj na mysz najechającą na element
• $useFocus() - reagować na skupiony i rozmyty element
• $useHash() - aktualizuj i reaguj na zmiany window.location.hash
• $useWindowSize() - zwraca szerokość i wysokość okna oraz reaguje na zmiany rozmiaru okna

Oto przykład $useHover() z folderu przykładów na GitHub:

<div x-data="{ hovering: $useHover($refs.target) }" class="py-8">
    <div
        class="w-52 h-64 rounded bg-red-500 transition-colors ease-in-out duration-300 mx-auto flex items-center justify-center"
        x-bind:class="{
            'bg-red-500': !hovering,
            'bg-blue-500': hovering
        }"
        x-ref="target"
    >
        <p class="font-medium" x-text="hovering ? 'Hovering...' : 'Not hovering...'"></p>
    </div>
</div>

npm install @ryangjchandler/alpine-hooks

You can learn more about this package, get full installation instructions, and view the source code on GitHub.