Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gremo/alpinejs-toolkit
A collection of small and dependency-free Alpine.js utilities
https://github.com/gremo/alpinejs-toolkit
alpinejs alpinejs-plugin
Last synced: about 2 months ago
JSON representation
A collection of small and dependency-free Alpine.js utilities
- Host: GitHub
- URL: https://github.com/gremo/alpinejs-toolkit
- Owner: gremo
- License: isc
- Created: 2023-11-02T19:34:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-03T12:46:42.000Z (about 1 year ago)
- Last Synced: 2023-12-03T13:36:59.406Z (about 1 year ago)
- Topics: alpinejs, alpinejs-plugin
- Language: TypeScript
- Homepage:
- Size: 17.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# alpinejs-toolkit
A collection of small and dependency-free [Alpine.js](https://alpinejs.dev) utilities, inspired by [stimulus-use](https://github.com/stimulus-use/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.
[](https://www.npmjs.com/package/alpinejs-toolkit)
[](https://www.npmjs.com/package/alpinejs-toolkit)
[](https://paypal.me/marcopolichetti)
[](https://github.com/gremo/alpinejs-toolkit/commits/main)
[](https://github.com/gremo/alpinejs-toolkit/actions)
[](https://github.com/gremo/alpinejs-toolkit/issues)
[](https://github.com/gremo/alpinejs-toolkit/pulls)
[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/gremo/alpinejs-toolkit.git)
## 🚀 Quick start
There are 2 ways to include this library into your project:
- Including it from a `` tag
- Importing it as a module
### Script tag
Include the `<script>` tag in the `<head>` of your document, just before Alpine:
```html
<script src="https://cdn.jsdelivr.net/npm/alpinejs-toolkit/dist/cdn.min.js" defer>
```
You can pass default options to each plugin by creating a `` and setting properties on the `window` object:
> [!Note]
> Options key for a specific plugin has the following name format: `Alpine<PluginNameInCamelCase>Options`.
```html
<script>
window.AlpineGetOptions = {
/* Get plugin default options */
};
window.AlpineUseMatchMediaOptions = {
/* UseMatchMedia plugin default options */
};
```
### As module
```bash
npm install alpinejs-toolkit
```
Import the package before starting Alpine:
```js
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: `Options`.
```js
Alpine.plugin(
Toolkit.withDefaults({
GetOptions: {
/* Get plugin default options */
},
UseMachMediaOptions: {
/* UseMatchMedia plugin default options */
},
}),
);
```
## 🧩 Plugins
| Plugin | Description |
| -------------------------------------------------- | --------------------------------------------------- |
| [`Get`](src/get/README.md) | Send GET requests |
| [`Scroll`](src/scroll/README.md) | Scroll to a target selector or offset |
| [`Timing`](src/timing/README.md) | Deal with timed functions |
| [`UseGeolocation`](src/useGeolocation/README.md) | Get the current position of the device |
| [`UseIdle`](src/useIdle/README.md) | Track user interaction with the page |
| [`UseMatchMedia`](src/useMatchMedia/README.md) | Track if the window matches the given media queries |
| [`UseVisibility`](src/useVisibility/README.md) | Track page visibility |
| [`UseWindowScroll`](src/useWindowScroll/README.md) | Track the (vertical) scroll ratio and direction |
| [`UseWindowSize`](src/useWindowSize/README.md) | Track the window size |
## ❤️ Contributing
All types of contributions are encouraged and valued. See the [Contributing](CONTRIBUTING.md) guidelines, the community looks forward to your contributions!
### 📘 License
This project is released under the under terms of the [ISC License](LICENSE).