React.useContext() in action

flexible-compound-components.js

// Flexible Compound Components
// http://localhost:3000/isolated/exercise/03.js

import * as React from 'react'
import {Switch} from '../switch'

/**
 * Create a Toggle component that accepts child elements and shares its
 * state with its child elements. This example shows a good use case for
 * React.useContext() to expose your component's state management API
 * to users so they don't need to worry about state management.
 */

const ToggleContext = React.createContext();
ToggleContext.displayName = 'ToggleContext' //Nice name for chrome debugger tools

function Toggle({children, ...props}) {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)

  const value = {on, toggle}

  return (
    <ToggleContext.Provider value={value} {...props}>
      {children}
    </ToggleContext.Provider>
  )
}

function useToggle() {
  const context = React.useContext(ToggleContext)
  if (!context) {
    throw new Error('useToggle() must be used within the context provider')
  }
  return context
}

function ToggleOn({children}) {
  const {on} = useToggle()
  return on ? children : null
}

function ToggleOff({children}) {
  const {on} = useToggle()
  return on ? null : children
}

function ToggleButton(props) {
  const {on, toggle} = useToggle()
  return <Switch on={on} onClick={toggle} {...props} />
}

function App() {
  return (
    <div>
      <Toggle>
        <ToggleOn>The button is on right?</ToggleOn>
        <ToggleOff>The button is off</ToggleOff>
        <div>
          <ToggleButton />
        </div>
      </Toggle>
    </div>
  )
}

export default App

/*
eslint
  no-unused-vars: "off",
*/