@ryangjchandler/alpine-toggle
Advanced tools
Quickly toggle / negate a property in your Alpine.js components.
✨ Help support the maintenance of this package by sponsoring me.
Quickly toggle / negate a property in your Alpine.js components.
When you need to toggle a property in your code, you probably have something like this inside of your action:
<button>very.deeply.nested[0].property = ! very.deeply.nested[0].property</button>
Wouldn't it be nice if you could do this instead:
<button @click="$toggle('very.deeply.nested.0.property')"></button>
Include the following <script> tag in the <head> of your document:
<script src="https://insert-cdn-link-here.com"></script>
Important: This must be added before loading Alpine.js when using CDN links.
This plugin provides a single $toggle magic property that can be invoked and accepts a single argument - the dot-notation of the property you wish to toggle.
<div x-data="{ foo: true }">
<p x-text="JSON.stringify(foo)"></p>
<button @click="$toggle('foo')">Toggle</button>
</div>
When the button is clicked, the value of foo will be flipped and become false.
You can also negate nested properties inside of objects:
<div x-data="{ foo: { bar: true } }">
<p x-text="JSON.stringify(foo.bar)"></p>
<button @click="$toggle('foo.bar')">Toggle (nested)</button>
</div>
Just pass in the dot-notation path for the property and the plugin will handle the rest.
If you have an array of objects, you might wish to use the index of the array too. Use the syntax below, as part of the dot-notation, to toggle something inside of an array.
<div x-data="{ foo: { bar: { boo: [true] } } }">
<p x-text="JSON.stringify(foo.bar.boo[0])"></p>
<button @click="$toggle('foo.bar.boo.0')">Toggle (nested array)</button>
</div>
This projects follow the Semantic Versioning guidelines. This means that there could be breaking changes on minor version changes, up until v1.x is reached.
For example, 0.1 -> 0.2 might introduce a breaking change.
Copyright (c) 2020 Ryan Chandler and contributors
Licensed under the MIT license, see LICENSE.md for details.
FAQs
Quickly toggle / negate a property in your Alpine.js components.
We found that @ryangjchandler/alpine-toggle demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.