Skip to content

A collection of small and dependency-free Alpine.js utilities

License

Notifications You must be signed in to change notification settings

gremo/alpinejs-toolkit

Repository files navigation

Alpine.js logo

alpinejs-toolkit

A collection of small and dependency-free Alpine.js utilities, inspired by stimulus-use and other great projects found on GitHub.

Caution

This library is still a WIP. There will be force pushes, history rewrites and major changes. NPM package will be available when reaching a stable state.

NPM version NPM downloads Donate

GitHub last commit GitHub Workflow Status GitHub issues GitHub pull request Open in Dev Containers

🚀 Quick start

There are 2 ways to include this library into your project:

  • Including it from a <script> tag
  • Importing it as a module

Script tag

Include the <script> tag in the <head> of your document, just before Alpine:

<script src="https://cdn.jsdelivr.net/npm/alpinejs-toolkit/dist/cdn.min.js" defer></script>

You can pass default options to each plugin by creating a <script> and setting properties on the window object:

Note

Options key for a specific plugin has the following name format: Alpine<PluginNameInCamelCase>Options.

<script>
  window.AlpineGetOptions = {
    /* Get plugin default options */
  };
  window.AlpineUseMatchMediaOptions = {
    /* UseMatchMedia plugin default options */
  };
</script>

As module

npm install alpinejs-toolkit

Import the package before starting Alpine:

import Alpine from 'alpinejs';
import Toolkit from 'alpinejs-toolkit';

Alpine.plugin(Toolkit);
Alpine.start();

You can pass default options to each plugin calling Toolkit.withDefaults():

Note

Options key for a specific plugin has the following name format: <PluginNameInCamelCase>Options.

Alpine.plugin(
  Toolkit.withDefaults({
    GetOptions: {
      /* Get plugin default options */
    },
    UseMachMediaOptions: {
      /* UseMatchMedia plugin default options */
    },
  }),
);

🧩 Plugins

Plugin Description
Get Send GET requests
Scroll Scroll to a target selector or offset
Timing Deal with timed functions
UseGeolocation Get the current position of the device
UseIdle Track user interaction with the page
UseMatchMedia Track if the window matches the given media queries
UseVisibility Track page visibility
UseWindowScroll Track the (vertical) scroll ratio and direction
UseWindowSize Track the window size

❤️ Contributing

All types of contributions are encouraged and valued. See the Contributing guidelines, the community looks forward to your contributions!

📘 License

This project is released under the under terms of the ISC License.

About

A collection of small and dependency-free Alpine.js utilities

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published