• Час читання ~1 хв
  • 07.06.2023

Модуль Alpine Hooks являє собою набір гачків для використання з Alpine.js. Цей пакунок містить різноманітні гачки, які використовуються для покращення досвіду розробника (DX) для поширених завдань Alpine.

Минуло багато часу з тих пір, як я випустив щось для @Alpine_JS , тому ось новий пакет: альпійські гачки. Натхненні гачками в React, ці магічні функції надають корисних помічників, яких я використовую в безлічі проектів. Перевір!

— Ryan Chandler (@ryangjchandler) June 6, 2023

https://t.co/FMTP9WO3tE На момент написання даного модуля є наступні гачки:

  • $useHover() - реагувати на наведення миші на елемент
  • $useFocus() - реагувати на сфокусований і розмитий елемент
  • $useHash() - оновлювати та реагувати на зміни до window.location.hash
  • $useWindowSize() - повертає ширину та висоту вікна та реагує на зміну розміру вікна

Ось приклад $useHover() з теки examples на GitHub:Ви можете встановити цей пакунок у свій проект за допомогою npm:

<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

Ви можете дізнатися більше про цей пакет, отримати повні інструкції щодо встановлення та переглянути вихідний код на GitHub.

Comments

No comments yet
Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Replies

Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Yurij Finiv

Yurij Finiv

Full stack

Про мене

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

Про автора CrazyBoy49z
WORK EXPERIENCE
Контакти
Ukraine, Lutsk
+380979856297