@@ -11,12 +11,19 @@ export function Toggle({ children }: { children: React.ReactNode }) {
1111 return < ToggleContext value = { { on, toggle } } > { children } </ ToggleContext >
1212}
1313
14+ // 🐨 create a custom useToggle() hook here
15+ // create a new context variable and read ToggleContext with use
16+ // when no context is found, throw an error with a useful message
17+ // otherwise return the context
18+ 1419export function ToggleOn ( { children } : { children : React . ReactNode } ) {
20+ // 🐨 instead reading context with use, we'll need to get that from useToggle()
1521 const { on } = use ( ToggleContext ) !
1622 return < > { on ? children : null } </ >
1723}
1824
1925export function ToggleOff ( { children } : { children : React . ReactNode } ) {
26+ // 🐨 instead reading context with use, we'll need to get that from useToggle()
2027 const { on } = use ( ToggleContext ) !
2128 return < > { on ? null : children } </ >
2229}
@@ -25,6 +32,7 @@ type ToggleButtonProps = Omit<React.ComponentProps<typeof Switch>, 'on'> & {
2532 on ?: boolean
2633}
2734export function ToggleButton ( { ...props } : ToggleButtonProps ) {
35+ // 🐨 instead reading context with use, we'll need to get that from useToggle()
2836 const { on, toggle } = use ( ToggleContext ) !
2937 return < Switch { ...props } on = { on } onClick = { toggle } />
3038}
0 commit comments