00:00 Alrighty so let's go and switch this for a switch slot component. Switch from our slots and then we can get rid of that, get rid of this. We're going to switch these for our text component. So instead of toggle on, we'll say text and that'll

00:19 be the slot will be called on text and this will be text and the slot will be off text. So those are the slots that we want to have access to and then we can dive into well of course that's not going to work out too well for us but

00:37 what's cool and kind of interesting here is that now the only thing we're grabbing from toggle from our toggle component or module is the toggle component and so what that means is we can actually come down here and say hey we're not going to use toggle or use toggle off or toggle on a toggle button all that stuff goes

00:55 away and we can actually delete our toggle context we can delete this we can get rid of this all this stuff because we're switching totally to slots and so we can also get rid of this. Wow look at all this stuff reusability for the win

01:10 what are we talking about this is great. Okay so with that now we have our toggle that does need to get to our different slots so what are the slots that we want to have we've got the switch slot we've got the text and we have this other text

01:27 slot so we have our switch and the switch is going to need the ID the on state and every time I say on state I think of all state and like are you in good hands this is not a paid advertisement and then our on click so

01:45 when the switch is clicked we want to toggle and then for our on text we want to have the hidden prop and our off text the hidden prop here also and so in this case when we are on or when we're not on

02:04 I want this on text to be hidden when we are on I want the off text to be hidden great so now we're providing all of the information that our different elements or the different possible slots need for them to render properly so then

02:20 let's see oh this is complaining because our text what text which should be coming oh right here we go from our slots there we go now it's happy I'm like oh I'm not sure why that's breaking so yes we have our text all of these

02:37 slot components now need to accept a slot prop because we need to be able to override the built-in slot so I'm going to add on each one of these I'm going to see if I can figure out a nice way to multi cursor this thing because who

02:52 wants to do this manually not me no thanks boom boom boom right here yep we'll say man no I'm not gonna be able to do it with that one fine we'll do it with these okay so and slot optional string and here's one of the drawbacks

03:11 of the slot the slot pattern is that that's as good as we can get we cannot say oh yeah this slot is the string of label like that doesn't even make sense it all it defaults to label what else would it be and so like different

03:29 components can have different named slots and there's no way to go from okay my toggle component here the slots that it has no way to go from there down into these components and so for that reason you actually may still want to have components that are specific like toggle compound components maybe they're built

03:48 on top of these but the reason you might do that is so that you can have some type safety between the toggle components and and it's specific slottable components you kind of lose some of the benefit of the slot pattern by doing that but it is all built on top of the same stuff so it kind of depends

04:07 on how badly you feel that you have such a wide thing because people could provide a slot that is incorrect like for example if we go into our app and I have a typo right here there's nothing to tell me that I've got something wrong

04:22 my type is too wide and so maybe we make a toggle text component that can have a slot prop called on text or off text and so then we get some type safety there just kind of depends on your appetite for the type safety versus the simplicity

04:38 of this API react aria actually does have a runtime check that they'll throw an error if you provide a slot that for which there is no available slot and that that can be kind of helpful and they'll actually say here all the available slots and it's it's all nice but yeah this all just is going to

04:58 depend on how you feel about the the dangers there and the reusability of different of all these slottable components so we're not going to go quite that far we're going to just stop right here with that but something to

05:15 think about this is probably the biggest weakness of the slot component by itself or the slot pattern okay so with all that we're going to also add a optional slot to this type and then this should now be slot or string so the this is all

05:34 the props plus it also potentially has a slot string prop and then we're going to rename this to default slot it before that's Lottie before it was the B slot but now we have an option of overriding that default and so we're going to

05:51 rename that to default okay so now we're going to get our slot that's going to come from prop slot and if that isn't provided then it'll fall back to the default if there is no slot provided then we can return the props as they are

06:06 so if no slot return the props because if there's no slot then like there's no reason to look into this slot context and here's one of the cool things where we're overriding the rules of hooks or not overriding them but the rules of

06:21 hooks conditional hooks don't apply to the use hook which is that's kind of nice this is a legit situation where like yeah we don't need to subscribe to changes in this context because we don't actually use it anyway just kind of cool okay great so with that now we have our slot it's based off of the one that they

06:41 gave us or the default value and then we're providing that slot down here everything's looking awesome so save that and now we're it's still not working and the reason for that is I'm not sure let's double check that we didn't miss anything if we look at our text let's look at our console we're

07:01 going to console log some stuff console log props and we've got slot on text and off text and I wonder if maybe we have a typo in our toggle on text off text

07:15 let's console log the slots objects and actually let's see here we've got our off text and on text we have our slot information if we take a look at the at

07:28 these these are spans as the our slots will render spans right here if we console log the props after that merging is happening we're not getting the on

07:44 and off so that is interesting let's take a look at our slot yeah we've got our off text we have our on text let's come down here and say slots oh I know what it is slots at slot there we go all right I'm not going to edit that out

08:04 because I think it can be useful for you to see the debugging process of that I have so now it is working do-do-do-do-do-do and we're getting our props properly applied our switch is also getting those props so we no longer

08:22 need to have our own context provider for our toggle component all that can be managed right here if you really wanted to get some type safety then you could export function called toggle on and this would return a text slot where the

08:40 slot is on text you could probably do some typescript fanciness to make sure that these slots property names are defined up here and you know limit that

08:51 or whatever or in fact you could say here's my toggle text I know I said we weren't going to get into this but I'm going to get into it anyway so we're

09:03 going to say react component props for a span and slot can oh and we need an object slot is on text or off text there we go and we pass our slot there yeah

09:20 be I guess we just forward all the props that's all we're doing props there we go and so now that does get us a little bit more type safety you might prefer to do things this way and it's not a whole lot more code so now we've

09:35 got on text and we can stick that right there and there it is and it's going to work exactly the same so maybe this is something that you'd want to do just say okay I've got some custom slots we're going to make a couple custom components they're going to be really really simple

09:55 just wrappers around the thing just so I can have some type safety on my slot seems like a pretty reasonable thing to do but in any case the the core pattern here is I have a lot of different components and they share a lot of

10:10 different things for the types of elements that they have they have text they've got buttons they've got a drop-down they've got a popover whatever and there are elements that I want to be shared across all these components so users of my compound components don't have to know okay I got a render this

10:29 text for that and that text for this and whatever and so that's why I say this kind of undoes some of the benefit of the slot pattern by having a specific component for this specific use case but again it gets you some of that type safety too so something to think about yeah interesting pattern huh that was

10:48 fun