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.
There are 2 ways to include this library into your project:
- Including it from a
<script>tag - Importing it as a module
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>npm install alpinejs-toolkitImport 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 */
},
}),
);| 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 |
All types of contributions are encouraged and valued. See the Contributing guidelines, the community looks forward to your contributions!
This project is released under the under terms of the ISC License.