react-components

React Components

Component Structure

import { cn } from "@/lib/utils";

interface ComponentProps {
  className?: string;
  children: React.ReactNode;
  variant?: "default" | "primary" | "secondary";
}

export function Component({
  className,
  children,
  variant = "default",
}: ComponentProps) {
  return (
    <div
      className={cn(
        "rounded-lg bg-background p-4",
        "hover:bg-muted/50 transition-colors",
        {
          "border-blue-500": variant === "primary",
          "border-gray-300": variant === "default",
        },
        className
      )}
    >
      {children}
    </div>
  );
}

Best Practices

We use TypeScript and Tailwind CSS. We use cn() for conditional classes, define clear prop interfaces with sensible defaults, keep components focused and small, use composition over inheritance, and implement proper loading and error states.

Props Pattern

interface Props {
  // Required props first
  id: string;
  title: string;

  // Optional props with defaults
  className?: string;
  variant?: "default" | "primary";
  disabled?: boolean;

  // Functions and callbacks
  onClick?: () => void;
  onSubmit?: (data: FormData) => Promise<void>;

  // Children and render props
  children?: React.ReactNode;
  renderHeader?: () => React.ReactNode;
}

State Management

// Use hooks for state
const [isOpen, setIsOpen] = useState(false);
const [data, setData] = useState<Data | null>(null);

// Use useEffect for side effects
useEffect(() => {
  fetchData().then(setData);
}, [dependency]);

// Custom hooks for reusable logic
const { user, loading, error } = useAuth();

Conditional Rendering

// Loading state
if (loading) return <Spinner />;

// Error state
if (error) return <ErrorMessage error={error} />;

// Empty state
if (!data.length) return <EmptyState />;

// Success state
return <DataDisplay data={data} />;

Testing

We test component rendering, user interactions, different states (loading, error, empty, success), and accessibility.