Component Variations: Considerations for Creating a Card Component

Chris Coyier wants to create a Card Component in React. But then he suddenly finds himself down the rabbit hole: how flexible does he make it? What is configurable and what is not? Where to draw the line?

It sounds very familiar, as I’m always pondering over things like this when writing libraries/reusable things in a project. Personally I’d settle on this variant:

const Card = props => {
  return(
    <div className="card">
      <WhateverHeader>{props.title}</WhateverHeader>
      {children}
    </div>
  )
}

The reason I’d choose this one is that the card layout itself is fixed (no custom headers but only one type of header) and thus consistent, while still giving flexibility by allowing the content to be anything.

Of course it all depends on the use case, and that’s exactly what helps for me: define what you want to support but more importantly what you don’t want to support. Yes, a tweak of the header its size would provide lots of flexibility, but the question is whether you want to support this use case or not.

Considerations for Creating a Card Component →