How to Build a Composable Stack Component

One of the simplest and yet most common layout patterns found on the web is putting one element on top of another element with consistent space between them. From form labels, to paragraphs of text, to social media feeds. They all need to stack one thing on top of another with uniform space between them. 

Let's say we are building the following component:

As you will notice, we have a few parts to this widget. There is a title section and a form section made up of two input groups and a button. The one thing that they all have in common is that they follow the same pattern. They all stack vertically with space between them. Here is the same mockup with the different space sizes pointed out.

What we need is a way to enforce that all the items will stack in the block direction. We also need a way to provide consistent space between the elements without creating space around the stacked elements themselves. That way, the stack can remain composable in any other environment.

 in these examples, but everything can easily be translated to any flavor of CSS, including vanilla CSS.)

export default function Subscribe() {
  return (
    <div>
      <div>
        <h2>Subscribe To Our Newsletter</h2>
        <p>
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        </p>
      </div>

      <div>
        <div>
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </div>

        <div>
          <label htmlFor="email">Email</label>
          <input type="text" id="email" />
        </div>

        <button>Subscribe</button>
      </div>
    </div>
  );
}

The first problem we want to solve is to get the labels to stack on top of our inputs. This problem is easily solved with a single line of CSS:

const Stack = styled.div`
  display: grid;
`;

, thereby implicitly setting a single column track for items inside the Stack. Each item that is placed in that column creates an implicit row. We can then use this new 

<Stack>
   <label htmlFor="name">Name</label>
   <input type="text" id="name" />
</Stack>

<Stack>
   <label htmlFor="email">Email</label>
   <input type="text" id="email" />
</Stack>

Our component has already taken a major step in the right direction:

The first thing you will notice is that not only are the labels stacked on top of each other, they also now take up the entire width of the column. 

All we need to do now is set the space between the items. We set the space between items using the 

 property, which takes any valid sizing unit, such as 

. To make it configurable via props, we will take advantage of the 

 string interpolation and derive the value from props, like this:

const Stack = styled.div`
  display: grid;
  gap: ${(props) => props.gutter ?? "1rem"};
`;

(If the syntax above is unfamiliar to you, it uses tagged template literals that are part of ES2015. 

You can find out more about tagged template literals over at MDN

 we are calling a tagged template literal that will let us pass in a function inside the 

. We can then customize what the CSS looks like depending on the value of the 

 property. We could have used any name for the 

 as it is a common term when talking about page layouts. If no value is passed to 

export default function Subscribe() {
  return (
    <Stack gutter="2rem">
      <Stack gutter="0.5rem">
        <h2>Subscribe To Our Newsletter</h2>
        <p>
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        </p>
      </Stack>

      <Stack>
        <Stack gutter="0.25rem">
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </Stack>

        <Stack gutter="0.25rem">
          <label htmlFor="email">Email</label>
          <input type="text" id="email" />
        </Stack>

        <button>Subscribe</button>
      </Stack>
    </Stack>
  );
}

And now our component looks like the final version:

We have a component that will universally stack all of its children and will separate them via a configurable value that passed into the 

We could stop here, but I would recommend one more tweak to the 

 prop. Right now, we are allowing any value passed into the gutter. It is considered best practice to adopt a spacing scheme when you are laying out items on the web for consistency. Choosing a good spacing scheme is beyond the scope of this post. For simplicity, let's use a spacing scheme based on t-shirt sizes and looks something like this:

const spacingMap = {
  xs: "0.125rem",
  sm: "0.25rem",
  md: "0.5rem",
  lg: "1rem",
  xl: "2rem",
  xxl: "4rem",
};

const Stack = styled.div`
  display: grid;
  gap: ${(props) => spacingMap[props.gutter] ?? spacingMap.lg};
`;

export default function Subscribe() {
  return (
    <Stack gutter="xl">
      <Stack gutter="md">
        <h2>Subscribe To Our Newsletter</h2>
        <p>
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        </p>
      </Stack>

      <Stack>
        <Stack gutter="sm">
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </Stack>

        <Stack gutter="sm">
          <label htmlFor="email">Email</label>
          <input type="text" id="email" />
        </Stack>

        <button>Subscribe</button>
      </Stack>
    </Stack>
  );
}

The Stack component is a straightforward yet powerful tool that allows you to compose vertical stacks of elements on your page.  

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Build a Composable Stack Component</h1><p></p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210713184632956_sean-stratton-ObpCE_X3j6U-unsplash.jpg" attachmentid="26f938b3-eab7-43be-aa21-f14e5abfaef5" contenteditable="false" data-width="5472" data-height="3648"><div></div></figure><p>Photo by&nbsp;<a href="https://unsplash.com/@seanstratton?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Sean Stratton</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/stack?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Unsplash</a></p><p>One of the simplest and yet most common layout patterns found on the web is putting one element on top of another element with consistent space between them. From form labels, to paragraphs of text, to social media feeds. They all need to stack one thing on top of another with uniform space between them.&nbsp;</p><p>Let's say we are building the following component:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210714011555189_newsletter.png" attachmentid="eb6f498c-c91b-452d-a22c-1fc11b1fe62f" contenteditable="false"><div></div></figure><p>As you will notice, we have a few parts to this widget. There is a title section and a form section made up of two input groups and a button. The one thing that they all have in common is that they follow the same pattern. They all stack vertically with space between them. Here is the same mockup with the different space sizes pointed out.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210714011638633_newsletter-redline.png" attachmentid="fe7bc105-addf-4a10-96e5-c0e6603715c1" contenteditable="false" data-width="1332" data-height="620"><div></div></figure><p>What we need is a way to enforce that all the items will stack in the block direction. We also need a way to provide consistent space between the elements without creating space around the stacked elements themselves. That way, the stack can remain composable in any other environment.</p><h1 class="heading-anchor-text" id="the-stack"><span>The Stack</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#the-stack">#</a></h1><p>(I will be using <a href="https://styled-components.com" rel="noopener noreferrer nofollow">Styled Components</a>&nbsp;in these examples, but everything can easily be translated to any flavor of CSS, including vanilla CSS.)</p><p>Let's start with some basic markup. </p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-Okwlz" id="cm-Okwlz">export default function Subscribe() {
  return (
    &lt;div&gt;
      &lt;div&gt;
        &lt;h2&gt;Subscribe To Our Newsletter&lt;/h2&gt;
        &lt;p&gt;
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;div&gt;
        &lt;div&gt;
          &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" id="name" /&gt;
        &lt;/div&gt;

        &lt;div&gt;
          &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
          &lt;input type="text" id="email" /&gt;
        &lt;/div&gt;

        &lt;button&gt;Subscribe&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}</textarea><p>And this is what that looks like:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210714012520046_stack-0.png" attachmentid="3a3840e9-a377-4840-b95e-aada4e124c95" contenteditable="false"><div></div></figure><p>The first problem we want to solve is to get the labels to stack on top of our inputs. This problem is easily solved with a single line of CSS:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-sD0Lc" id="cm-sD0Lc">const Stack = styled.div`
  display: grid;
`;</textarea><p>We create a new <code>Stack</code> component and set the <code>display</code> property to <code>grid</code>, thereby implicitly setting a single column track for items inside the Stack. Each item that is placed in that column creates an implicit row. We can then use this new <code>Stack&nbsp;a</code> component like this:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-QvVEP" id="cm-QvVEP">&lt;Stack&gt;
   &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
   &lt;input type="text" id="name" /&gt;
&lt;/Stack&gt;

&lt;Stack&gt;
   &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
   &lt;input type="text" id="email" /&gt;
&lt;/Stack&gt;</textarea><p>Our component has already taken a major step in the right direction:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210714013129087_stack-1.png" attachmentid="f1ef0993-eed4-40a5-939a-cc98c90a5162" contenteditable="false"><div></div></figure><p>The first thing you will notice is that not only are the labels stacked on top of each other, they also now take up the entire width of the column. </p><p>All we need to do now is set the space between the items. We set the space between items using the <code>gap</code> property, which takes any valid sizing unit, such as <code>px</code>, <code>%</code>, or <code>rem</code>. To make it configurable via props, we will take advantage of the <code>styled-components</code> string interpolation and derive the value from props, like this:</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-Kp4SG" id="cm-Kp4SG">const Stack = styled.div`
  display: grid;
  gap: ${(props) =&gt; props.gutter ?? "1rem"};
`;</textarea><p>(If the syntax above is unfamiliar to you, it uses tagged template literals that are part of ES2015. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Templatliterals#taggedtemplates" rel="noopener noreferrer nofollow">You can find out more about tagged template literals over at MDN</a>)</p><p>When we use <code>styled.div</code> we are calling a tagged template literal that will let us pass in a function inside the <code>${}</code> that gives us access to the component <code>props</code>. We can then customize what the CSS looks like depending on the value of the <code>props</code>.</p><p>The above code takes the value of the <code>gutter</code> prop and uses that as the value of the <code>gap</code> property. We could have used any name for the <code>prop</code>, such as <code>space</code> or even <code>gap</code>. I chose to use <code>gutter</code> as it is a common term when talking about page layouts. If no value is passed to <code>gutter</code>, it will fall back to <code>1rem</code>.</p><p>This means we can rewrite our <code>Subscribe</code>&nbsp;component like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-dk98F" id="cm-dk98F">export default function Subscribe() {
  return (
    &lt;Stack gutter="2rem"&gt;
      &lt;Stack gutter="0.5rem"&gt;
        &lt;h2&gt;Subscribe To Our Newsletter&lt;/h2&gt;
        &lt;p&gt;
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        &lt;/p&gt;
      &lt;/Stack&gt;

      &lt;Stack&gt;
        &lt;Stack gutter="0.25rem"&gt;
          &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" id="name" /&gt;
        &lt;/Stack&gt;

        &lt;Stack gutter="0.25rem"&gt;
          &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
          &lt;input type="text" id="email" /&gt;
        &lt;/Stack&gt;

        &lt;button&gt;Subscribe&lt;/button&gt;
      &lt;/Stack&gt;
    &lt;/Stack&gt;
  );
}</textarea><p>And now our component looks like the final version:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210714014422884_stack-2.png" attachmentid="3d524b37-24ac-4180-9861-14da5570d034" contenteditable="false"><div></div></figure><p>We have a component that will universally stack all of its children and will separate them via a configurable value that passed into the <code>gutter</code> prop.</p><p>We could stop here, but I would recommend one more tweak to the <code>gutter</code> prop. Right now, we are allowing any value passed into the gutter. It is considered best practice to adopt a spacing scheme when you are laying out items on the web for consistency. Choosing a good spacing scheme is beyond the scope of this post. For simplicity, let's use a spacing scheme based on t-shirt sizes and looks something like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-h9Z1Y" id="cm-h9Z1Y">const spacingMap = {
  xs: "0.125rem",
  sm: "0.25rem",
  md: "0.5rem",
  lg: "1rem",
  xl: "2rem",
  xxl: "4rem",
};</textarea><p>Now, all we need to do is adjust our <code>Stack</code> component slightly, like this:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-3HEXB" id="cm-3HEXB">const Stack = styled.div`
  display: grid;
  gap: ${(props) =&gt; spacingMap[props.gutter] ?? spacingMap.lg};
`;</textarea><p>and update our <code>Subscribe</code>&nbsp;component like this:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-sAFjY" id="cm-sAFjY">export default function Subscribe() {
  return (
    &lt;Stack gutter="xl"&gt;
      &lt;Stack gutter="md"&gt;
        &lt;h2&gt;Subscribe To Our Newsletter&lt;/h2&gt;
        &lt;p&gt;
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        &lt;/p&gt;
      &lt;/Stack&gt;

      &lt;Stack&gt;
        &lt;Stack gutter="sm"&gt;
          &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" id="name" /&gt;
        &lt;/Stack&gt;

        &lt;Stack gutter="sm"&gt;
          &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
          &lt;input type="text" id="email" /&gt;
        &lt;/Stack&gt;

        &lt;button&gt;Subscribe&lt;/button&gt;
      &lt;/Stack&gt;
    &lt;/Stack&gt;
  );
}</textarea><p>The Stack component is a straightforward yet powerful tool that allows you to compose vertical stacks of elements on your page. &nbsp;</p><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Build a Composable Stack Component

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript