It's time to throw away your old ideas on margin
A new way to think about margins
What is a spacer component
In the world of React, there are three main component types:
Layout - created to control WHERE your components/elements will be located
Presentational- created to display info.
Container - created to provide data from a network request
Because a spacer component is responsible for where a component or element will be placed, I consider a spacer component a type of Layout component.
Separation of concerns
Because a spacer component is primarily concerned with margin and not padding, it allows you to create less bloated Layout components. Lets examine a container component I call “Box” below.
One thing to notice about this component is it doesn’t concern itself with margin. If it did, I would have to add the following props:
marginTop, marginRight, marginLeft, marginBottom
Adding these new properties would make my Layout component even more bloated and more difficult to maintain and reason about.
How to create a spacer component
Lets look at a spacer component I’ve recently made.
The main thing to focus on is the createSpacerStyle function. It’s role is to allow the developer to dynamically create a margin value according to a theme design. Let’s say a developer uses this component as seen below.
<Spacer position="top" variant="xxlarge" />The createSpacerStyle function would take the values of the given properties and dynamically return an object that would create the appropriate margin. In the example above the function would return this:
{
marginTop:14
}This is what a spacer component would look like in the wild.
Ways to support my newsletter
🖥 If you believe this content is valuable, share it on social media
🎤 If you believe I would be a good fit for a podcast, let your favorite podcaster know
Connect with me
Connect with me on LinkedIn!
Connect with me on Twitter!