Reactivity with SolidJS Spreads & Directives
Transcript from the "Spreads & Directives" Lesson
>> Spreads are a way that we can dynamically add multiple properties from an object. Maybe those properties change and pass them down through our children. And it also has a convenience factor cuz sure, we could pass each of these things individually, right? And to be fair, this can be more optimized because we can impact each change independently when we do that.
[00:00:23] But sometimes, we don't know all the variables that are gonna come through. So in those cases, it's easier sometimes to just use the syntax and we get the same result of our info here. And our info components literally just taking these props and just writing us a nice message.
[00:00:51] The thing that always remember what spreads is, they work as this great in the GSX. But we have to remember that once more we're passing stuffs to those spreads merging objects to use those helpers that we showed earlier to make sure you don't lose reactivity. And the last binding syntax, this one doesn't come out too often.
[00:01:12] But it is an interesting addition that we added to the GSX language. Refs are great, but sometimes you wanna package up more advanced behavior with them. And the way we can do that is something we call a directive and some frameworks like felt call them actions and angular calls them directives.
[00:01:38] I can't remember what view calls them. But essentially, we have this ability to kind of add some custom DOM logic. So let's say on this modal class, we wanted it to have click outside behavior. You wanted to add this behavior so that it closed whenever you click outside the modal.
[00:01:55] Well, we can define that here, right? And this is where we basically implement that click outside logic. And the way we do this is creating this function that has a signature. It takes the element and it takes an accessor. And essentially, let's think here. If we wanna click outside, what we're gonna do is we're gonna make some kind of click handler.
[00:02:22] And we can do this by essentially checking if the element contains the event target, right? So, and it's a, Right, and we actually are gonna give the ability for our click outside to be enabled to be toggled on and off. So we're also gonna check if our accessor which is a function, it's always a function regardless.
[00:02:48] Sorry, it's writing off the side of the screen here, is has a truthy value. And then if there's a click handler here, we're going to. On our document.body, add an event listener to the click that uses this click handler. It's also important that we clean up after ourselves here.
[00:03:41] Then, here, we import our function. We go to our div and go use colon. So this is namespace thing, click or is it click outside? And by default, it's a Boolean, so this will just work. But we can also for implementation here, toggle it. So that we're only managing it when the modal is visible, right?
[00:04:13] And set show to false. And if everything works properly, we're gonna have a modal. Clicking in, it's fine, but when we click out of it, sorry. If we click out of it, okay, we can there. Typo, my bad. Contains, isn't it? Yeah, there's an S, there we go.
[00:04:39] We open it, click in it, nothing happens. We click out of it and we get another error. Cuz I forgot to put click on the click handler, beautiful, all right. This is in clicking, fine, click out, close. And we basically have basic modal behavior, that we can add to really any DOM element by just including this directive.
[00:05:05] So as I said, it's just syntactic sugar over ref, but it's kind of a nice convenience to be able to kind of packaged up these behaviors as well. We've seen a lot of this usage and things like custom form libraries where they'll have some custom hooks and then they'll have some custom directives and it kind of like all ties together.
[00:05:26] So there's a lot we can do with the GSX language, right? And that is basically it for the specific syntaxes.