ShiftBy

Snippet

Note

Credit where credit is due! I originally learned this technique from Josh W. Comeau. His component snippet is a React component. Mine is an Astro component. I’m adding this simply to have code that I can copy/paste for either framework in the future, via his site or mine.

Sometimes, for one reason or another, an element in our UI might refuse to align properly. ShiftBy is a way to wrangle it into alignment.

Simply wrap your component with a ShiftBy and make pixel adjustments, positively or negatively.

---
type Props = {
  /**
   * Adjusts the children left and right.
   * Negative values go left, positive values go right
   */
  x?: number
  /**
   * Adjusts the children up and down.
   * Negative values go up, positive values go down
   */
  y?: number
}

const { x = 0, y = 0 } = Astro.props
---

<div style={`transform: translate(${x}px, ${y}px)`}>
  <slot />
</div>

And use it like so:

---
import { Icon, ShiftBy } from '~/components'
---

<ShiftBy x={1} y={-3}>
  <Icon name="search" />
</ShiftBy>

Liked the post?

Give the author a dopamine boost with a few "beard strokes". Click the beard up to 50 times to show your appreciation.

Kyle Shevlin is the founder & lead software engineer of Agathist, a software development firm with a mission to build good software with good people.