DEV Community

Cover image for DevTips – DaisyUi (Rating, Carousel)
Oscar Yiu
Oscar Yiu

Posted on

DevTips – DaisyUi (Rating, Carousel)

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>
Enter fullscreen mode Exit fullscreen mode


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 });
    }
  };
Enter fullscreen mode Exit fullscreen mode

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

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay