DEV Community

Guilherme Samuel
Guilherme Samuel

Posted on • Originally published at guilhermefront.com

Better way to think when creating components

When in doubt of how your component should look like and what it needs to support, start by how you would consume it. A few examples:

A dropdown which will receive a title and the content (which should be able to also receive JSX). An icon will be optional:

<Dropdown title="My title" content={<p>My content</p>} />

<Dropdown icon={<MyIcon />} title="My title" content={<p>My content</p>} />
// Now you know you need to accept an optional icon (ReactNode), a title string and the content (which is also a ReactNode)
Enter fullscreen mode Exit fullscreen mode

A customizable flexible card with a lot of different variations:

<Card>
  <Card.IconWrapper>
    <MyIcon />
  </Card.IconWrapper>
  <Card.Title>My title</Card.Title>
  <Card.Content>My content</Card.Content>
</Card>

<Card>
  <Card.Title>My title</Card.Title>
  <Card.Content>My content</Card.Content>
  <Card.IconWrapper>
    <MyIcon />
  </Card.IconWrapper>
</Card>

<Card>
  <Card.Title>My title</Card.Title>
  <Card.Content>My content</Card.Content>
</Card>
// Now you know you'll need to create separate components (title, content, iconwrapper) and assign to the main card.
Enter fullscreen mode Exit fullscreen mode

A sidebar that I can just pass a structured data to it:

<Sidebar
  items={[
    {
      name: "Home",
      icon: HomeIcon,
      link: '/',
    },
    {
      name: "About us",
      icon: AboutUsIcon,
      link: '/about-us',
    },
    {
      name: "Terms and conditions",
      icon: TermsIcon,
      link: '/terms',
    },
  ]}
/>

// Now you know you'll need an items prop, which you'll loop for each item and render the name, icon and pass the link as a href.
Enter fullscreen mode Exit fullscreen mode

Instead of starting with the solution right away, a better approach may be starting by the use cases, which you will know more carefully what you need to build in order to support your needs.

Top comments (0)