Skip to content

ryangjchandler/alpine-hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

npm install @ryangjchandler/alpine-hooks

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

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.

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

$useHover

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

<div x-data="{ hovering: $useHover($refs.target) }">
    <div id="target" x-ref="target"></div>
</div>

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

$useFocus

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

<div x-data="{ focused: $useFocus($refs.target) }">
    <input x-ref="target" />
</div>

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

$useHash

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

<div x-data="{ tab: $useHash('#one') }">
    <button x-on:click="tab = '#two'">Two</button>

    <!-- More buttons go here... -->

    <div x-show="tab === '#two'">
        <!-- ... -->
    </div>
</div>

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.

$useWindowSize

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

<div x-data="{ size: $useWindowSize() }">
    <p x-show="size.width < 720">
        Your screen is very narrow.
    </p>
</div>

About

A collection of hooks for use with Alpine.js.

Resources

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published