00:00 All right, so Kelly, the co-worker, went in to add some analytics and stuff and discovered a problem with our current implementation. So she added this onClick, and right now we're just console info onButtonClick. And so I want to look in my console and get those.

00:16 And then I click on the button, and I'm getting the onButtonClick, but I'm not getting the toggle behavior anymore. What the... What is going on? Why is this not working? I'm so frustrated. This is super annoying. The reason this is happening is because the way that the prop collections is implemented,

00:35 it means that even though this is an implementation detail and we don't actually know what props there are, I mean, there's TypeScript information and all that, so we could look at that, but we aren't supposed to know what there are because it's an implementation detail. So I am overriding the onClick that Toggler Props provides with my own onClick.

00:54 And if I switch them, then I'm doing the opposite. I'm no longer able to customize that behavior. And so if I wanted to accomplish this with the collections version of this API, and then I'd have to say Toggler Props.onClick, and of course you want to pass all the args, which

01:12 of course it'll just be an event, but let's just... That's how I would do it. Pass all the args, and huh, yeah, I hate that a lot. What if in the future, the useToggle hook changes from an onClick to like an onTouch? Well, in that case, I'm going to have to do this.

01:29 I'm so sick of all this extra weird stuff I've got to do. And what if I say, okay, I'm going to have an onPress, and I'm going to do my thing here. Oh, I forgot how to write JSX for a second there. There we go. So I've got my own onPress and I'm doing stuff, but then wait, I've got to...

01:48 Right now, the Toggler isn't going to require an onPress, but maybe it will in the future. So I guess I'll have to do this. Yikes. No, thank you, my good friend. No, I don't want to do this. And so this is why, even though Ryan Florence actually calls this pattern peanut butter

02:07 props, which I just think is so great because you're spreading it across the elements. I like that a lot. Even though it's such a good name, we're not going to be doing this because of this particular problem. So what would be better is if we could say, getTogglerProps, and then here, we can provide

02:27 all of our custom props in here. And then of course, this is no longer JSX, so we got to redo that. And there we go. And then we don't need to worry about merging things. We can have getTogglerProps be responsible for that. We can actually do that for all of this stuff.

02:46 Our ARIA label can also have that customization. So we put all of our custom props inside of this getTogglerProps function, the object that we pass to that. And then getTogglerProps can be like, oh, okay, let me take all the things that you're

03:02 trying to apply, and I will merge what I am doing with what you're trying to do, so that we are calling all the functions properly, and we're merging styles and class names, and all that stuff can be merged appropriately, so that you don't have to worry about that implementation detail of which props we're actually applying.

03:20 This is the PropGetters pattern, and you're going to implement it for our toggle, because it's just better. And then we're going to actually get rid of the TogglerProps, because it's just not as good. All right, let's get going.