react-composition-patterns

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Composition Patterns

## Cuándo usar esta skill
- Diseñar la arquitectura de un sistema de componentes
- Refactorizar un componente que se está volviendo muy complejo
- Crear componentes flexibles y reutilizables
- Código revisión sobre estructura de componentes React

## Patrones principales

### 1. Compound Components
Componentes que trabajan juntos, compartiendo estado implícitamente.

```tsx
// ✅ Compound Component pattern
interface TabsContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabsContext = createContext<TabsContextType | null>(null);

function useTabsContext() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error("useTabsContext must be used within Tabs");
  return ctx;
}

function Tabs({ children, defaultTab }: { children: React.ReactNode; defaultTab: string }) {
  const [activeTab, setActiveTab] = useState(defaultTab);
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

Tabs.List = function TabList({ children }: { children: React.ReactNode }) {
  return <div role="tablist" className="tabs-list">{children}</div>;
};

Tabs.Tab = function Tab({ id, children }: { id: string; children: React.ReactNode }) {
  const { activeTab, setActiveTab } = useTabsContext();
  return (
    <button
      role="tab"
      aria-selected={activeTab === id}
      onClick={() => setActiveTab(id)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function TabPanel({ id, children }: { id: string; children: React.ReactNode }) {
  const { activeTab } = useTabsContext();
  if (activeTab !== id) return null;
  return <div role="tabpanel">{children}</div>;
};

// Uso:
<Tabs defaultTab="tab1">
  <Tabs.List>
    <Tabs.Tab id="tab1">Tab 1</Tabs.Tab>
    <Tabs.Tab id="tab2">Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel id="tab1">Contenido 1</Tabs.Panel>
  <Tabs.Panel id="tab2">Contenido 2</Tabs.Panel>
</Tabs>
```

### 2. Render Props
Pasa lógica como prop para máxima flexibilidad de renderizado.

```tsx
// ✅ Render Props
interface DataFetcherProps<T> {
  url: string;
  render: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode;
}

function DataFetcher<T>({ url, render }: DataFetcherProps<T>) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return render(data, loading, error);
}

// Uso:
<DataFetcher<User>
  url="/api/user"
  render={(user, loading, error) => {
    if (loading) return <Spinner />;
    if (error) return <ErrorMessage error={error} />;
    return <UserCard user={user!} />;
  }}
/>
```

### 3. Higher Order Components (HOC)
Envuelve un componente para añadir funcionalidad.

```tsx
// ✅ HOC para autenticación
function withAuth<P extends object>(
  WrappedComponent: React.ComponentType<P>,
  redirectTo = '/login'
) {
  return function AuthenticatedComponent(props: P) {
    const { user, loading } = useAuth();

From garri333/Skills, MIT.

More from garri333/Skills