Compound Components Pattern

import React, { useState, createContext, useContext } from 'react';

// 1. Create a Context for the compound components to share
const ToggleContext = createContext();

// 2. The Parent Component manages the state
export function Toggle({ children }) {
  const [on, setOn] = useState(false);
  return (
    <ToggleContext.Provider value={{ on, setOn }}>
      <div className='p-4 border rounded bg-gray-50'>{children}</div>
    </ToggleContext.Provider>
  );
}

// 3. Child components consume the context
export function ToggleOn({ children }) {
  const { on } = useContext(ToggleContext);
  return on ? children : null;
}

export function ToggleOff({ children }) {
  const { on } = useContext(ToggleContext);
  return on ? null : children;
}

export function ToggleButton() {
  const { on, setOn } = useContext(ToggleContext);
  return <button onClick={() => setOn(!on)} className='bg-blue-500 text-white p-2 rounded'>Toggle</button>;
}

// 4. Usage: Highly declarative and flexible!
export default function App() {
  return (
    <Toggle>
      <ToggleButton />
      <hr className='my-2'/>
      <ToggleOn>The button is ON!</ToggleOn>
      <ToggleOff>The button is OFF!</ToggleOff>
    </Toggle>
  );
}