Custom Components

Introduction

So far, most of the components in this course have been small, single-purpose examples built to demonstrate one concept at a time. Real applications need something more: your own library of custom components that fit your project's specific needs — a styled Card, an Alert banner, a StatBadge, a UserAvatar — each with an interface you designed on purpose.

This lesson is about the design thinking behind building custom components: deciding what a component should accept as props, what should stay fixed, and how to combine your custom pieces into larger features.

What Makes a Component "Custom"

Every component you write is technically "custom" in the sense that React did not ship it for you. But the term usually refers to components you design deliberately as reusable building blocks for your project — as opposed to a one-off chunk of JSX you happened to extract from a page.

The difference is intent: a custom component has a thought-out interface (its props), a clear responsibility, and is meant to be used more than once, possibly by other developers on your team who never see its internal implementation.

Designing a Prop API

The props a component accepts are its public interface — similar to the parameters of a function. Good prop design means thinking from the caller's perspective: what does someone using this component actually need to control, and what names make that obvious?

Configurable vs Fixed

Not everything about a component should be a prop. Turning every possible detail into a prop makes a component confusing to use and harder to maintain. The goal is to expose exactly what varies in practice, and keep everything else fixed inside the component.

Building a Custom Alert Component

Consider a custom Alert component used to show success, warning, or error messages throughout an app. Its prop API should expose exactly what varies between uses: the message, the type of alert, and an optional close handler.

function Alert({ type = 'info', title, message, onClose }) {
  const colors = {
    info: '#3b82f6',
    success: '#22c55e',
    warning: '#f59e0b',
    danger: '#ef4444',
  };

  return (
    <div style={{ borderLeft: `4px solid ${colors[type]}`, padding: '12px 16px' }}>
      {title && <strong>{title}</strong>}
      <p>{message}</p>
      {onClose && <button onClick={onClose}>Dismiss</button>}
    </div>
  );
}

export default Alert;

Notice the design choices: type defaults to 'info' so most callers do not need to think about it, title and onClose are optional since not every alert needs a heading or a close button, and the internal padding and border style stay fixed so every Alert looks consistent.

<Alert
  type="success"
  title="Saved!"
  message="Your changes have been saved successfully."
  onClose={() => setShowAlert(false)}
/>

[green left border]
Saved!
Your changes have been saved successfully. [Dismiss]

Composing Custom Components

The real power of custom components shows up when you combine several of them to build a feature. A "Notifications Panel" feature, for instance, might be built entirely from smaller custom components you already designed.

function NotificationsPanel({ notifications, onDismiss }) {
  return (
    <Card title="Notifications">
      {notifications.map((note) => (
        <Alert
          key={note.id}
          type={note.type}
          message={note.message}
          onClose={() => onDismiss(note.id)}
        />
      ))}
    </Card>
  );
}

Here, NotificationsPanel does not know or care how Card or Alert are implemented internally — it simply composes them using their public prop APIs, exactly the way you would use any built-in HTML element.

Naming and Organizing Components

As a project grows past a handful of components, a consistent file structure and naming scheme keeps things easy to find.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Designing custom components well means thinking like an API designer: choosing clear, minimal props that expose exactly what varies, giving sensible defaults, and keeping everything else consistent and fixed. Composing several well-designed custom components is how real React features get built.

In this lesson, you learned what separates a deliberately designed custom component from an incidental one, built a custom Alert component, composed it into a larger feature, and covered naming and organization conventions. Next, you will dig deeper into what makes a component genuinely reusable across an entire codebase.