Spacer Component

May 19, 2024

A component that makes it easy to create vertical and horizontal space between elements, which varies based on the screen size.

Table of Contents

Intro
The Spacer Component
Using the Spacer Component

Intro

One of the issues with hardcoding spacing between elements is that it doesn't scale well across different screen sizes. What looks good on a desktop might look terrible on a mobile device. This is where the Spacer component comes in.

It's a simple component that takes vertical and horizontal spacing (for mobile and desktop) as props.

The Spacer Component

Here's the code for the Spacer component:

Spacer.js
import React from "react";

const Spacer = ({
  vertical = 0,
  horizontal = 0,
  verticalMobile = 0,
  horizontalMobile = 0,
}) => {
  const desktopStyle = {
    width: `${horizontal}rem`,
    height: `${vertical}rem`,
  };

  const mobileStyle = {
    width: `${horizontalMobile}rem`,
    height: `${verticalMobile}rem`,
  };

  return (
    <>
      <div className="desktop-only" style={desktopStyle}></div>
      <div className="mobile-only" style={mobileStyle}></div>
    </>
  );
};

export default Spacer;

you then just need to have a couple of utility css classes that look like this

/* screens under 1024px */
@media only screen and (max-width: 1024px) {
  .desktop-only {
    display: none;
  }
}

/* screen over 1024px */
@media only screen and (min-width: 1025px) {
  .mobile-only {
    display: none;
  }
}

which makes it so that only one of the div elements is displayed at a time, depending on the screen size.

You could of course set multiple breakpoints for different screen sizes, but this is a simple example.

Using the Spacer Component

Usage is simple.

<div className="content">
  <div className="container center">
    <div className="constrain">
      <Spacer vertical={4} verticalMobile={1} />
      <AboutShort />
      <Spacer vertical={8} verticalMobile={2} />
      <RecentWork />
      <Spacer vertical={4} verticalMobile={1} />
    </div>
  </div>
</div>

I find that I mostly use this for vertical spacing, but it's nice to have the option for horizontal spacing as well.

This component allows you to set the margins on your elements and headers to 0, and then create screen width variable spacing between elements with the Spacer component. This is great because you can shuffle around your components without having to connstantly adjust their styles, as well as giving you design flexibility between different screen sizes.

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

Technologies Used

TypeScript

Electron

React

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More