DEV Community

Discussion on: Polymorphic Components: Authoring flexible and reusable components.

Collapse
 
paul_emechebe profile image
Paul-Simon Emechebe

Okay so what I'm understanding from this is that

  1. Create components dedicated to a particular variant e.g ReactCard.
  2. Make those components render another component called Card, where the Card component accepts an icon and a className. Right?
Collapse
 
fjones profile image
FJones

Precisely. I've made a few adjustments to make it work on codepen, but the gist is there:

Rather than selecting the variant settings from within the Card, we supply the variant settings to the card. The result is ultimately still that you just call, e.g. <ReactCard /> with your show, headerText, and text props, but now you can easily extend this to support, for instance, an AngularCard without having to touch Card at all: