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 →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.