Kent C. Dodds: 0:00 We're going to switch gears here a little bit and move to custom hooks and some patterns that you can apply to custom hooks. Lots of these patterns can also apply to function components as well, but it's mostly custom hooks where these things really shine.

0:12 For this one, we're going to talk about prop collections and prop getters. Two patterns that I created when I was working on downshift that I found to be really, really useful for ensuring that people build accessible UIs with that downshift component. It's now available in react-table, @reach/tooltip, and in other libraries as well.

0:33 The idea is that typically when we're going to have a component like useToggle or downshift, which is autocomplete type of component. The users of your hook are probably using them to build specific types of UIs. In our case, the UI we're building is a switch or a toggle button here. Here, we have that implemented right here. In the final version, we just get back and forth, on and off.

0:58 In either case, we have this toggle functionality that people are building. There are some props that should probably be applied to those for accessibility purposes as well as wiring up event handlers. That is your objective here, is to create a collection of props that should be applied to the element that we want to enhance with the toggle capabilities.

1:20 There's also a prop getters variant of this pattern which is actually what I do more often. Don't miss out on this extra credit. I'll see you on the other side of the exercise.