Compound Components

// Eine Komponente, alle Konfiguration über Props
<Tabs
    items={[
        { id: '1', label: 'Account', content: <AccountPanel /> },
        { id: '2', label: 'Settings', content: <SettingsPanel /> },
        { id: '3', label: 'Billing', content: <BillingPanel />, disabled: true },
    ]}
    defaultActive="1"
    onChange={(id) => console.log(id)}
    renderTab={(item, isActive) => (
        <span style={{ fontWeight: isActive ? 'bold' : 'normal' }}>
            {item.label}
        </span>
    )}
/>

<Tabs defaultValue="1" onChange={(id) => console.log(id)}>
    <Tabs.List>
        <Tabs.Tab value="1">Account</Tabs.Tab>
        <Tabs.Tab value="2">Settings</Tabs.Tab>
        <Tabs.Tab value="3" disabled>Billing</Tabs.Tab>
    </Tabs.List>

    <Tabs.Panel value="1"><AccountPanel /></Tabs.Panel>
    <Tabs.Panel value="2"><SettingsPanel /></Tabs.Panel>
    <Tabs.Panel value="3"><BillingPanel /></Tabs.Panel>
</Tabs>

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

// 1. Context für den geteilten State
const TabsContext = createContext(null);

// Helfer: wirft sprechende Fehler, wenn ein Sub-Component außerhalb von <Tabs> verwendet wird
function useTabsContext(component) {
    const ctx = useContext(TabsContext);
    if (!ctx) {
        throw new Error(`<${component}> muss innerhalb von <Tabs> verwendet werden.`);
    }
    return ctx;
}

// 2. Root: hält den State und stellt ihn über Context bereit
function Tabs({ defaultValue, onChange, children }) {
    const [active, setActive] = useState(defaultValue);
    const baseId = useId();

    const select = (value) => {
        setActive(value);
        onChange?.(value);
    };

    return (
        <TabsContext.Provider value={{ active, select, baseId }}>
            <div className="tabs">{children}</div>
        </TabsContext.Provider>
    );
}

// 3. List: semantischer Container für die Tab-Knöpfe
function TabsList({ children }) {
    return (
        <div className="tabs-list" role="tablist">
            {children}
        </div>
    );
}

// 4. Tab: einzelner Knopf
function Tab({ value, disabled, children }) {
    const { active, select, baseId } = useTabsContext('Tabs.Tab');
    const isActive = active === value;

    return (
        <button
            type="button"
            role="tab"
            id={`${baseId}-tab-${value}`}
            aria-controls={`${baseId}-panel-${value}`}
            aria-selected={isActive}
            disabled={disabled}
            onClick={() => select(value)}
            data-state={isActive ? 'active' : 'inactive'}
        >
            {children}
        </button>
    );
}

// 5. Panel: zeigt seinen Inhalt, wenn sein value aktiv ist
function TabsPanel({ value, children }) {
    const { active, baseId } = useTabsContext('Tabs.Panel');
    if (active !== value) return null;

    return (
        <div
            role="tabpanel"
            id={`${baseId}-panel-${value}`}
            aria-labelledby={`${baseId}-tab-${value}`}
        >
            {children}
        </div>
    );
}

// 6. Sub-Komponenten als Properties anhängen → Dot-Notation im Konsum
Tabs.List = TabsList;
Tabs.Tab = Tab;
Tabs.Panel = TabsPanel;

export default Tabs;

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

const SelectContext = createContext(null);

function Select({ value, onChange, placeholder = 'Bitte wählen', children }) {
    const [isOpen, setOpen] = useState(false);
    const [internalValue, setInternal] = useState(value);
    const current = value !== undefined ? value : internalValue;

    const choose = (v) => {
        setInternal(v);
        onChange?.(v);
        setOpen(false);
    };

    // Label des aktiven Options-Elements aus den Children herauslesen
    const activeLabel = (() => {
        let label = placeholder;
        // Children werden hier nur zur Anzeige der gewählten Option durchsucht
        // (in einer Production-Implementierung würde man React.Children.toArray nutzen)
        return label;
    })();

    return (
        <SelectContext.Provider value={{ current, choose }}>
            <div className="select" data-open={isOpen}>
                <button
                    type="button"
                    className="select-trigger"
                    onClick={() => setOpen(o => !o)}
                    aria-haspopup="listbox"
                    aria-expanded={isOpen}
                >
                    {current ?? placeholder}
                </button>
                {isOpen && (
                    <ul className="select-list" role="listbox">
                        {children}
                    </ul>
                )}
            </div>
        </SelectContext.Provider>
    );
}

function Option({ value, children }) {
    const ctx = useContext(SelectContext);
    if (!ctx) throw new Error('<Select.Option> muss innerhalb von <Select> verwendet werden.');

    const isSelected = ctx.current === value;
    return (
        <li
            role="option"
            aria-selected={isSelected}
            onClick={() => ctx.choose(value)}
            data-state={isSelected ? 'selected' : 'unselected'}
        >
            {children}
        </li>
    );
}

Select.Option = Option;

export default Select;

function App() {
    const [country, setCountry] = useState('DE');

    return (
        <Select value={country} onChange={setCountry}>
            <Select.Option value="DE">Deutschland</Select.Option>
            <Select.Option value="AT">Österreich</Select.Option>
            <Select.Option value="CH">Schweiz</Select.Option>
        </Select>
    );
}

// 1. Uncontrolled mit Default — Komponente verwaltet ihren State selbst
<Tabs defaultValue="1">
    …
</Tabs>

// 2. Controlled — Konsument hält den State
const [tab, setTab] = useState('1');
<Tabs value={tab} onChange={setTab}>
    …
</Tabs>

// 3. Hybrid (wie React's <input>) — beide unterstützen, value gewinnt wenn gesetzt
function Tabs({ value, defaultValue, onChange, children }) {
    const [internal, setInternal] = useState(defaultValue);
    const isControlled = value !== undefined;
    const current = isControlled ? value : internal;
    const select = (v) => {
        if (!isControlled) setInternal(v);
        onChange?.(v);
    };
    // …
}

<Card
    header={<CardHeader>Titel</CardHeader>}
    footer={<CardFooter>Mehr…</CardFooter>}
>
    Inhalt
</Card>