• Время чтения ~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
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