Snippet

ShiftBy

edit
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's face, which is mostly a beard with eyes

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

Logo for Introduction to State Machines and XState
Introduction to State Machines and XState
Check out my courses!
If you enjoy my posts, you might enjoy my courses, too. Click the button to view the course or go to Courses for more information.
Sign up for my newsletter
Let's chat some more about TypeScript, React, and frontend web development. Unsubscribe at any time.