#component-patterns

Reactadvanced

Compound components with context instead of Children.map

import { createContext, useContext, useState, type ReactNode } from "react";

type TabsState = { activeTab: string; setActiveTab: (id: string) => void };
const TabsContext = createContext<TabsState | null>(null);

Build a Tabs component whose parts talk through context instead of cloning and inspecting children, so consumers can nest and reorder freely.