🎯 Props for Customization — Making Flexible Components

Instead of creating multiple similar components, use props to let the parent customize colors, sizes, behavior, and appearance. One flexible component replaces many hardcoded versions.

🎯 Customizing Appearance with Props

Props let you control visual aspects like colors, sizes, and spacing. When a prop changes the appearance, you write conditional styles or use object mapping to handle different values:

function Button({ text, color = "blue", size = "medium" }) {
  const sizeStyles = {
    small: { padding: "5px 10px", fontSize: "12px" },
    medium: { padding: "10px 20px", fontSize: "14px" },
    large: { padding: "15px 30px", fontSize: "16px" },
  };

  return (
    <button style={{ backgroundColor: color, ...sizeStyles[size] }}>
      {text}
    </button>
  );
}

// Same component, different appearances
<Button text="Small" color="blue" size="small" />
<Button text="Large" color="red" size="large" />

<details>

<summary>📚 More Examples</summary>

// Alert component with type variants
function Alert({ type = "info", message, onClose }) {
  const colors = {
    error: "#ff4444",
    warning: "#ffaa00",
    success: "#44ff44",
    info: "#4488ff",
  };

  return (
    <div style={{ backgroundColor: colors[type], padding: "10px" }}>
      <p>{message}</p>
      {onClose && <button onClick={onClose}>Dismiss</button>}
    </div>
  );
}

<Alert type="error" message="Something went wrong!" />
<Alert type="success" message="File saved!" />

</details>

💡 Customizing Component Behavior

Props can change what your component does, not just how it looks. By passing different functions or values as props, the same component can behave differently in each context:

The same component can show different content, respond to events differently, or conditionally render elements—all controlled by props the parent passes down.

function Card({ showActions = false, onAction, variant = "default" }) {
  const styles = {
    default: { border: "1px solid #ccc" },
    elevated: { boxShadow: "0 2px 8px rgba(0,0,0,0.1)" },
  };

  return (
    <div style={styles[variant]}>
      <h3>Card Title</h3>
      <p>Content here</p>
      {showActions && (
        <button onClick={onAction}>Action</button>
      )}
    </div>
  );
}

// Same component, different behavior
<Card variant="default" />
<Card variant="elevated" showActions={true} onAction={() => console.log('clicked')} />

<details>

<summary>📚 More Examples</summary>

// Customizable list with optional filtering
function List({ items, onSelect, selectable = false }) {
  return (
    <ul>
      {items.map(item => (
        <li
          key={item.id}
          onClick={() => selectable && onSelect(item.id)}
          style={{ cursor: selectable ? 'pointer' : 'default' }}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}

<List items={users} />
<List items={users} selectable={true} onSelect={handleSelect} />

</details>

🎨 Real-World Example: Flexible Badge Component

function Badge({ count, variant = "primary" }) {
  const bgColor = variant === "primary" ? "blue" : "gray";
  const displayCount = count > 99 ? "99+" : count;

  return (
    <span
      style={{
        display: "inline-block",
        backgroundColor: bgColor,
        color: "white",
        padding: "4px 8px",
        borderRadius: "12px",
        fontSize: "12px",
      }}
    >
      {displayCount}
    </span>
  );
}

// Use in different contexts
<Badge count={5} />
<Badge count={150} variant="secondary" />

🔑 Key Takeaways

• ✅ Use props to customize appearance (colors, sizes, text)

• ✅ Use props to customize behavior (when to show, how to respond)

• ✅ Props eliminate code duplication by making components flexible

• ✅ Default props help when values aren't provided

• ✅ One reusable component can replace many similar ones

• ✅ Think: "What should be customizable?" when building components

Ready to practice? Challenges | Next: Prop Types & Validation