Livewire: new screencasts, animating lists, abusing form objects, and other fun stuff
| Hey Livewire people, Comin' at you with another pile of updates, random thoughts, and tips. Highlights first: Aight, let's get to it, shall we? 🧠 Hybrid slot/props Here's a pattern I've been using lately when building some Blade components. Consider a button component that you want to be able to pass an "icon" prop for simple icons, but also a slot for custom SVGs: You can actually hack Blade components to support both by adding a little conditional. Check it out: That's just one of the many little patterns I cover in the new screencast series. Knowing Blade components inside and out is such a huge advantage for Livewire devs, and I'm so pumped to have a singular resource to point people to now: Watch the new Blade Components series → 🛵 Animating @foreach loops Here's a fun one. I recently came across a blog post by Eser DENIZ where he shows you how to use a simple tool called "AutoAnimate" to transition re-ordering of lists in Livewire. I've seen AutoAnimate before, but I didn't realize how well it works with Livewire out of the box. Like for real. It's kind of magical. Someone made an Alpine plugin that makes an easy task even easier, so that's fun too. But ya, go check out his blog post, then honestly just try it in your app. You'll be delighted. 😈 Abusing form objects When I was working on the Data Tables series, I discovered a neat pattern: Using Livewire Form objects for, well... not just forms. Form objects are actually just helpful containers for properties and behaviors, which makes them perfect for things like table filters. So check this out. Here's a "Filters" form object with some data-table-filtery properties: Now, check out how you can use this form object in a data table Livewire component to store a bunch of filter state, but also modify a query using those filters: The coolest part is that you can bind directly to the filter properties using `wire:model` and even pass the filter object down to nested Livewire components (like a chart or something). I go in-depth on this technique in the recent data tables series, so check that out if you haven't. Watch the Data Tables screencast series → 👋 Signing off Alright, that's it for now. As always, you can reply to this email with feedback, or just to say hey! Cha cha real smooth, -Caleb |
Comments
Post a Comment