{"id":19075143,"url":"https://github.com/gremo/alpinejs-toolkit","last_synced_at":"2025-10-28T14:36:18.372Z","repository":{"id":205432499,"uuid":"713568285","full_name":"gremo/alpinejs-toolkit","owner":"gremo","description":"A collection of small and dependency-free Alpine.js utilities","archived":false,"fork":false,"pushed_at":"2023-12-03T12:46:42.000Z","size":22,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-02T17:49:59.823Z","etag":null,"topics":["alpinejs","alpinejs-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gremo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null}},"created_at":"2023-11-02T19:34:52.000Z","updated_at":"2024-05-19T00:42:22.000Z","dependencies_parsed_at":"2023-12-03T13:36:57.313Z","dependency_job_id":null,"html_url":"https://github.com/gremo/alpinejs-toolkit","commit_stats":null,"previous_names":["gremo/alpinejs-toolkit"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gremo%2Falpinejs-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gremo%2Falpinejs-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gremo%2Falpinejs-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gremo%2Falpinejs-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gremo","download_url":"https://codeload.github.com/gremo/alpinejs-toolkit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240127086,"owners_count":19751938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","alpinejs-plugin"],"created_at":"2024-11-09T01:53:29.815Z","updated_at":"2025-10-28T14:36:18.306Z","avatar_url":"https://github.com/gremo.png","language":"TypeScript","funding_links":["https://paypal.me/marcopolichetti"],"categories":["3. Alpine.js Resources"],"sub_categories":[],"readme":"\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable-next-line MD041 --\u003e\n![Alpine.js logo](https://alpinejs.dev/alpine_long.svg)\n\u003c!-- prettier-ignore-end --\u003e\n\n# alpinejs-toolkit\n\nA 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.\n\n\u003e [!Caution]\n\u003e 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.\n\n[![NPM version](https://img.shields.io/npm/v/alpinejs-toolkit.svg?logo=npm)](https://www.npmjs.com/package/alpinejs-toolkit)\n[![NPM downloads](https://img.shields.io/npm/dw/alpinejs-toolkit.svg?logo=npm)](https://www.npmjs.com/package/alpinejs-toolkit)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-ff3f59.svg?logo=githubsponsors)](https://paypal.me/marcopolichetti)\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/gremo/alpinejs-toolkit?logo=github)](https://github.com/gremo/alpinejs-toolkit/commits/main)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/gremo/alpinejs-toolkit/ci.yaml?logo=github)](https://github.com/gremo/alpinejs-toolkit/actions)\n[![GitHub issues](https://img.shields.io/github/issues/gremo/alpinejs-toolkit.svg?logo=github)](https://github.com/gremo/alpinejs-toolkit/issues)\n[![GitHub pull request](https://img.shields.io/github/issues-pr/gremo/alpinejs-toolkit.svg?logo=github)](https://github.com/gremo/alpinejs-toolkit/pulls)\n[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers\u0026message=Open\u0026color=blue\u0026logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/gremo/alpinejs-toolkit.git)\n\n## 🚀 Quick start\n\nThere are 2 ways to include this library into your project:\n\n- Including it from a `\u003cscript\u003e` tag\n- Importing it as a module\n\n### Script tag\n\nInclude the `\u003cscript\u003e` tag in the `\u003chead\u003e` of your document, just before Alpine:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/alpinejs-toolkit/dist/cdn.min.js\" defer\u003e\u003c/script\u003e\n```\n\nYou can pass default options to each plugin by creating a `\u003cscript\u003e` and setting properties on the `window` object:\n\n\u003e [!Note]\n\u003e Options key for a specific plugin has the following name format: `Alpine\u003cPluginNameInCamelCase\u003eOptions`.\n\n```html\n\u003cscript\u003e\n  window.AlpineGetOptions = {\n    /* Get plugin default options */\n  };\n  window.AlpineUseMatchMediaOptions = {\n    /* UseMatchMedia plugin default options */\n  };\n\u003c/script\u003e\n```\n\n### As module\n\n```bash\nnpm install alpinejs-toolkit\n```\n\nImport the package before starting Alpine:\n\n```js\nimport Alpine from 'alpinejs';\nimport Toolkit from 'alpinejs-toolkit';\n\nAlpine.plugin(Toolkit);\nAlpine.start();\n```\n\nYou can pass default options to each plugin calling `Toolkit.withDefaults()`:\n\n\u003e [!Note]\n\u003e Options key for a specific plugin has the following name format: `\u003cPluginNameInCamelCase\u003eOptions`.\n\n```js\nAlpine.plugin(\n  Toolkit.withDefaults({\n    GetOptions: {\n      /* Get plugin default options */\n    },\n    UseMachMediaOptions: {\n      /* UseMatchMedia plugin default options */\n    },\n  }),\n);\n```\n\n## 🧩 Plugins\n\n| Plugin                                             | Description                                         |\n| -------------------------------------------------- | --------------------------------------------------- |\n| [`Get`](src/get/README.md)                         | Send GET requests                                   |\n| [`Scroll`](src/scroll/README.md)                   | Scroll to a target selector or offset               |\n| [`Timing`](src/timing/README.md)                   | Deal with timed functions                           |\n| [`UseGeolocation`](src/useGeolocation/README.md)   | Get the current position of the device              |\n| [`UseIdle`](src/useIdle/README.md)                 | Track user interaction with the page                |\n| [`UseMatchMedia`](src/useMatchMedia/README.md)     | Track if the window matches the given media queries |\n| [`UseVisibility`](src/useVisibility/README.md)     | Track page visibility                               |\n| [`UseWindowScroll`](src/useWindowScroll/README.md) | Track the (vertical) scroll ratio and direction     |\n| [`UseWindowSize`](src/useWindowSize/README.md)     | Track the window size                               |\n\n## ❤️ Contributing\n\nAll types of contributions are encouraged and valued. See the [Contributing](CONTRIBUTING.md) guidelines, the community looks forward to your contributions!\n\n### 📘 License\n\nThis project is released under the under terms of the [ISC License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgremo%2Falpinejs-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgremo%2Falpinejs-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgremo%2Falpinejs-toolkit/lists"}