x-shown
v1.0.1
Published
Alpine.js plugin to run JavaScript when an element is shown or hidden with x-show
Downloads
69
Readme
x-shown
This is a plugin that adds two directives to Alpine: x-shown and x-hidden. The code in those directives is run when the element has been successfully shown or hidden.
Works with and without transitions.
Example:
<div
x-show="open"
x-shown="console.log('shown', $el)"
x-hidden="console.log('hidden', $el)"
></div>Add the directives to an element that has x-show.
Installation
As a module
npm install x-shownimport Alpine from 'alpinejs';
import shown from 'x-shown';
Alpine.plugin(shown);
window.Alpine = Alpine;
Alpine.start();From a CDN
<html>
<head>
...
<!-- Alpine Plugins -->
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>
<!-- Alpine Core -->
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>
</head>
...
</html>