The compound component pattern that makes React APIs feel like magic

// Nobody wants to use a component with this API
 }
  renderGroupLabel={(group) => {group}}
  searchable
  clearable
  multiSelect
  maxSelections={5}
  placeholder="Choose..."
  onSearch={handleSearch}
  onChange={handleChange}
  value={selected}
/>


The compound component solution


  
typescript
  
// Much nicer to use

  
  
    
    
      Apple
      Banana
    
    
      Carrot
    
  

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

// Shared context — the glue between subcomponents
interface SelectContextValue {
  value: string;
  onChange: (value: string) => void;
  isOpen: boolean;
  setIsOpen: (open: boolean) => void;
  search: string;
  setSearch: (s: string) => void;
  labelId: string;
  menuId: string;
}

const SelectContext = createContext(null);

function useSelectContext() {
  const ctx = useContext(SelectContext);
  if (!ctx) throw new Error('Select subcomponents must be used inside ');
  return ctx;
}

// Root component — manages shared state
interface SelectProps {
  value: string;
  onChange: (value: string) => void;
  children: React.ReactNode;
}

function SelectRoot({ value, onChange, children }: SelectProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [search, setSearch] = useState('');
  const labelId = useId();
  const menuId = useId();

  return (
    
      
{children}
    
  );
}

// Subcomponents
function Trigger({ placeholder = 'Select...' }: { placeholder?: string }) {
  const { value, isOpen, setIsOpen, labelId, menuId } = useSelectContext();
  return (
     setIsOpen(!isOpen)}
      className="select-trigger"
    >
      {value || placeholder}
      {isOpen ? '▲' : '▼'}
    
  );
}

function Menu({ children }: { children: React.ReactNode }) {
  const { isOpen, menuId, labelId } = useSelectContext();
  if (!isOpen) return null;
  return (
    

      {children}
    
  );
}

function Search() {
  const { search, setSearch } = useSelectContext();
  return (
    

       setSearch(e.target.value)}
        placeholder="Search..."
        className="select-search"
        onClick={(e) => e.stopPropagation()}
      />
    
  );
}

function Group({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    

      {label}
      
{children}
    
  );
}

function Option({ value, children }: { value: string; children: React.ReactNode }) {
  const { value: selected, onChange, setIsOpen, search } = useSelectContext();
  
  // Filter by search
  if (search && !String(children).toLowerCase().includes(search.toLowerCase())) {
    return null;
  }
  
  return (
    
 { onChange(value); setIsOpen(false); }}
      className={`select-option ${selected === value ? 'selected' : ''}`}
    >
      {children}
    
  );
}

// Assemble the compound component
export const Select = Object.assign(SelectRoot, {
  Trigger,
  Menu,
  Search,
  Group,
  Option,
});

// Simple use case — no groups, no search

  
  
    Option A
    Option B
  


// Complex use case — groups + search, custom trigger

  
  
    
    
      India
      Japan
    
    
      Germany