DEV Community 👩‍💻👨‍💻

Cover image for A shifty component
Top
Top

Posted on

A shifty component

You may have noticed a pattern in this article: lots of small tweaks to make things feel right.

It can feel chaotic to be constantly shifting things around. To add a bit of a constraint, and to ensure a consistent strategy is used, I like to create a little React component for myself. Here's what it looks like:

function ShiftBy({ x = 0, y = 0, children, ...delegated }) {
  return (
    <div
      {...delegated}
      style={{
        transform: `translate(${x}px, ${y}px)`,
      }}
    >
      {children}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Here's how it's used:

<section>
  <ShiftBy x={-3}>
    <Heading>Hello world</Heading>
  </ShiftBy>
  <p>This is a paragraph below a heading</p>
</section>
Enter fullscreen mode Exit fullscreen mode

Even if you're not familiar with react, hopefully this snippet gives you a sense what it's doing. our ShiftBy component allows us to shift something by a few pixels along either axis.

I like this because it's very clear what the intent is; we're making minute adjustments to make things feel well-aligned. We aren't sprinkling random bits of CSS across a bunch of pre-existing elements, seemingly at random.

transform: translate is the least invasive way I know to shift something. Unlike using margins, it won't pull siblings along for the ride.

You'd be surprised how often this component comes in handy. For example, I do a slight amount of shifting to the custom bullets in my unordered lists:

  • Item 1
  • Item 2

Aligning them to center or baseline don't feel quite right, so I tweak them by a few pixels until they sit well with my eyes.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.