Skip to content

Files

Latest commit

 

History

History
108 lines (80 loc) · 4.63 KB

README.md

File metadata and controls

108 lines (80 loc) · 4.63 KB

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.