I found daisyui to be a great tool for its simplicity and wide range of components. However, I encountered some issues while using the rating and carousel components. In this article, I will provide tips on how to effectively use these components in daisyui, along with examples and codebase.

When working with the rating component, I came across an issue where clicking on the first row affected the value of the second row. This happened because I was using the same name for the input tags in different rating components. To resolve this, it is important to use different names for the input tags.

<div className="rating">
      <input
        type="radio"
        name={name}
        className="mask mask-star-2 bg-orange-400"
      />
      <input
        type="radio"
        name={name}
        className="mask mask-star-2 bg-orange-400"
      />
      <input
        type="radio"
        name={name}
        className="mask mask-star-2 bg-orange-400"
        checked
      />
      <input
        type="radio"
        name={name}
        className="mask mask-star-2 bg-orange-400"
      />
      <input
        type="radio"
        name={name}
        className="mask mask-star-2 bg-orange-400"
      />
    </div>

As for the carousel component, I noticed that when navigating through the carousel using the provided buttons, the page would scroll to the selected photo. This behavior wasn’t what I expected. To address this, I implemented a solution which involved preventing the default behavior on click and then manually scrolling left within the carousel component to display the desired target.

const handleClickBtn = (
    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
    i: number
  ) => {
    event.preventDefault();
    const btn = event.currentTarget;
    const carousel = document.getElementById(carouselId);
    if (carousel) {
      const href = btn.getAttribute("href")!;
      const target = carousel.querySelector<HTMLDivElement>(href)!;
      const left = target.offsetLeft;
      setActiveIndex(i);
      carousel.scrollTo({ left: left });
    }
  };

You can find a demo website and the corresponding code below. Feel free to check it out!
Github repo: https://github.com/15077693d/demo-for-my-blog/blob/main/src/pages/rating.tsx

Rating demo: https://demo-for-my-blog.vercel.app/rating
Carousel demo: https://demo-for-my-blog.vercel.app/carousel