v9: Dynamic Chevron Rotation (RTL & LTR) #tailwind

[zaaakher]

So I spent that last couple of hours trying to rotate the Chevron component in a way that would point to the correct direction regardless of the dir prop passed to the DayPicker directly or to any of its parents.

I'd like to share the knowledge for others who potentially work with RTL

Here's the stackblitz to see it in action

Conclusion

If you want the chevron icons to be correctly oriented (in all cases) like so:

Use the following code in your Chevron custom component

 Chevron: (props) => (
         <svg
           width="20"
           height="20"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
           className={cn("opacity-80", {
             "ltr:rotate-180":
               (dir === "ltr" && props.orientation === "right") ||
               (dir === "rtl" && props.orientation === "right"),
             "rtl:rotate-180":
               (dir === "rtl" && props.orientation === "left") ||
               (dir === "ltr" && props.orientation === "left"),
             "rotate-180 rtl:rotate-0": props.orientation === "right",
             "rotate-0": props.orientation === "left",
           })}
         >
           <path d="m15 18-6-6 6-6" />
         </svg>
       ),

Note: Here's source code for the cn which is a simple classes merger.

[gpbl]

Thanks for your feedback as usual @zaaakher !

Do you have an idea how we could make this easier and less cumbersome?

[zaaakher]

@gpbl in v8 it used to be as simple as:

components={{
         IconLeft: ({ ...props }) => (
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
             height="20"
             aria-label="Next Month"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
           >
             <path d="m15 18-6-6 6-6" />
           </svg>
         ),
         IconRight: ({ ...props }) => (
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
             height="20"
             aria-label="Next Month"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
             className="rotate-180"
           >
             <path d="m15 18-6-6 6-6" />
           </svg>
         ),
       }}

And It just flipped itself when the parent container has dir='rtl' Which means there's no need to even pass a dir property to the DayPicker component itself. I think the internal Nav component was just inheriting the dir (i could be wrong)