Skip to main content

Zodiac bar

ZodiacBar displays the Chinese zodiac sign for each year in a range, newest first, with an optional link and title per year.

Example

  1. 🐍
  2. 🐲
  3. 🐰
  4. 🐯
  5. 🐮
  6. 🐭
<ZodiacBar
  endYear={2025}
  startYear={2020}
/>

Usage

<ZodiacBar
  startYear={2008}
  endYear={2026}
  itemOf={(year, zodiac) => ({
      title: `${year} ${zodiac}`,
      link: `/events/${year}`
  })}
/>

endYear defaults to the current year. itemOf customizes each item's title and link, and itemClassName restyles the year cards. The exported zodiacOf(year) helper returns the zodiac emoji for any historical year.