00:00 All righty, let's delete this and call getTogglerProps. We'll get that from useToggle. So with that then, of course, everything blows up because we haven't implemented that yet. But let's dive into useToggle, and we're going to create a function called getTogglerProps.

00:16 Function, getTogglerProps, and yep, we're going to return these TogglerProps pieces of information. So let's say getTogglerProps. That's what we're returning now. Save that. And now it's not blowing up, so that's nice.

00:34 Of course, this isn't working, and this isn't working. And that's because those each are passing some props that are expected to be returned. So the on needs to be passed to the switch. The getTogglerProps is passing these onClicks

00:51 and other things, so we need to pass the props that were given back. So props. So now this is working, but this one's not working because, again, we're overriding the onClicks, so we need to merge these properly.

01:08 Now, I'm not going to get too much into the details of the props type. I guess we can just say make this a generic, and this is going to be props, and it's going to return the props that can be implied, actually.

01:25 But the props we want to specifically expect that they could pass an onClick, and the same kind of onClick that would be passed to a button. So we're going to say onClick is optional, and if they do provide us an onClick, then it's going to be the same thing that you

01:42 get if you did a button onClick. There we go. And with that now, we can say our onClick that we pass here is going to take an event, and we'll toggle, we'll just call toggle as it is.

02:02 And then if they provided an onClick, then we'll call that with the event. And this event is going to be, well, we'll just do any right now. Well, fine, we'll do a mouse event. And this is going to come off of our props,

02:19 so I'm actually going to destructure the onClick so that the props objects we have does not have an onClick. We're not going to override it anymore. OK, great. So with that now, click, click, click, click, click, all that is working, click, click, click, click, click, we're getting both behavior because we're calling both.

02:38 And if you want to go all the way, then you can make a special function that handles this. Because in a lot of scenarios that I've found when I'm doing this, I actually have a lot of different events that I'm handling. And I've got a mouse over, and I've got an onPress, and I've got a key up, and whatever.

02:56 And I don't want to have to do this. This feels like boilerplate to me doing this everywhere. What would be nicer is if I could say, hey, onClick, I want you to call all of these functions, onClick and toggle. And if it exists, then call it. If it doesn't exist, don't bother.

03:14 But I want you to call these and call them in order. And these two would be functionally equivalent. So let's make that. We'll make a function called callAll. And the types for this are going to be kind of funny. And this is not a TypeScript workshop, so we're going to skip that.

03:32 And what callAll needs to accept is any number of functions. So these functions is an array of functions. And then we're going to return a function that takes any number of args. And for each one of them, if that function exists, then we'll call it. And here, I'd like to do that instead.

03:49 That works basically the same. So that's the basic idea of callAll. You can make this more type safe if you wanted to. Feel free to do that. But the idea is just call all of these functions. And so now, we're getting that behavior just as we desire.

04:06 And ultimately, the idea here is to make it so that you have this type of an API so users of your hook can provide their own props that they want to have applied to the element and have those props merged with the props that you need to have provided. And everything can be an implementation detail

04:24 of your prop collection function. And again, this is really just kind of a helper thing. So you could, say, make another hook that's useToggleWithToggler. And so then, you could actually take all of this,

04:41 get rid of it from here, and say, here's my onAndToggle equals useToggle, and then have your toggler props and then return that. And so now, your useToggle can be like the base level thing. If you don't need any help, just use this one. But if you have this particular use case, then use this one,

05:00 and I'll give you some extra help. And so if you have lots of different use cases for your set of state that you're managing and all that stuff, then you could totally do that and just have individual hooks for each one of those use cases that have some utility functions for getting the props that

05:18 are needed for those use cases, which can be quite handy. So that way, people aren't paying extra for a thing that they don't actually use if they don't actually need it. There you go. That is the prop collections and prop getters pattern.