Hooks for Alpine.js

This package contains a variety of hooks for Alpine.js that can be used to improve the developer experience of common front-end development tasks.

Installation

You can install this package via npm:

``sh
npm install @ryangjchandler/alpine-hooks
`

You can then register all of the available hooks as an Alpine plugin.

`js
import Alpine from 'alpinejs';
import Hooks from '@ryangjchandler/alpine-hooks';

Alpine.plugin(Hooks);
Alpine.start();
`

Or if you only need particular hooks, you can import and register them separately.

`js
import Alpine from 'alpinejs';
import { useHover, useWindowSize } from '@ryangjchandler/alpine-hooks';

Alpine.plugin(useHover);
Alpine.plugin(useWindowSize);
Alpine.start();
`

Usage

The table below lists all of the available hooks.

| Hook | Description | Example |
| --- | --- | --- |
| $useHover | Reacts to a mouse hovering over a specific element. | View |
| $useFocus | Reacts to a specific element being focused and blurred. | View |
| $useHash | Update and react to changes to window.location.hash. | View |
| $useWindowSize | Read and react to changes in the window / viewport size. | View |

$3

This hook can be used to react to the cursor hovering over a specific element.

`html


When the #target element is being hovered over, hovering will be true. Otherwise it will default to false.

$3

This hook can be used to react to focus changes on an element.

`html


When the input element is focused, the property will be true. When the blur event is fired (unfocusing), it will be false.

$3

This hook allows you to modify window.location.hash and react to external changes too.

`html


Changing the value of the tab property updates the hash in the URL and is reactive. The tab property will also read the hash when the component is initialised, defaulting to the value passed in to the hook.

$3

This hook lets returns the width and height of the viewport and reacts to changes.

`html