react-component-patterns

Files (1)

• SKILL.md

SKILL.md (first lines)

# React 元件設計模式

## Compound Components

父元件透過 Context 共享狀態，子元件自由組合：

```tsx
import { createContext, useContext, useState, type ReactNode } from 'react';

interface AccordionContextValue {
  activeIndex: number | null;
  toggle: (index: number) => void;
}

const AccordionContext = createContext<AccordionContextValue | null>(null);

function useAccordion() {
  const ctx = useContext(AccordionContext);
  if (!ctx) throw new Error('useAccordion must be used within Accordion');
  return ctx;
}

interface AccordionProps {
  children: ReactNode;
  defaultIndex?: number;
}

export function Accordion({ children, defaultIndex = null }: AccordionProps) {
  const [activeIndex, setActiveIndex] = useState<number | null>(defaultIndex);
  const toggle = (index: number) =>
    setActiveIndex((prev) => (prev === index ? null : index));

  return (
    <AccordionContext.Provider value={{ activeIndex, toggle }}>
      <div role="tablist">{children}</div>
    </AccordionContext.Provider>
  );
}

interface ItemProps {
  index: number;
  title: string;
  children: ReactNode;
}

Accordion.Item = function AccordionItem({ index, title, children }: ItemProps) {
  const { activeIndex, toggle } = useAccordion();
  const isOpen = activeIndex === index;

  return (
    <div>
      <button role="tab" aria-expanded={isOpen} onClick={() => toggle(index)}>
        {title}
      </button>
      {isOpen && <div role="tabpanel">{children}</div>}
    </div>
  );
};
```

使用方式：

```tsx
<Accordion defaultIndex={0}>
  <Accordion.Item index={0} title="Section 1">Content 1</Accordion.Item>
  <Accordion.Item index={1} title="Section 2">Content 2</Accordion.Item>
</Accordion>
```

## Polymorphic Component（as prop）

讓元件可渲染為不同 HTML 元素：

```tsx
import { type ElementType, type ComponentPropsWithoutRef } from 'react';

type ButtonProps<T extends ElementType = 'button'> = {
  as?: T;
  variant?: 'primary' | 'secondary';
} & ComponentPropsWithoutRef<T>;

export function Button<T extends ElementType = 'button'>({
  as,
  variant = 'primary',
  className,
  ...props
}: ButtonProps<T>) {
  const Component = as || 'button';
  return <Component className={`btn btn-${variant} ${className ?? ''}`} {...props} />;
}
```

使用方式：

```tsx
<Button>Click me</Button>
<Button as="a" href="/about">About</Button>
<Button as={Link} to="/home">Home</Button>
```

## 受控與非受控元件

同時支援受控與非受控模式：

```tsx
import { useState, useCallback } from 'react';

interface ToggleProps {
  value?: boolean;
  defaultValue?: boolean;
  onChange?: (value: boolean) => void;
}

export function Toggle({ value, defaultValue = false, onChange }: ToggleProps) {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = value !== undefined;
  const currentValue = isControlled ? value : internalValue;

  const handleToggle = useCallback(() => {

From vincent119/ai-rules-kit, MIT.

More from vincent119/ai-rules-kit