DEV Community

Tahsin Abrar
Tahsin Abrar

Posted on

4 1 1 1 1

Vue.js Star Rating Component

A Vue.js component for creating a star rating system, allowing users to rate items or content.

Features

  • Customizable star rating with a specified number of stars.
  • Supports both clicking and hover interactions for setting the rating.
  • Emits the selected rating for parent component communication.
  • Easily integrate into your Vue.js application.

Usage

Installation

  1. Ensure you have Vue.js installed in your project.
  2. Copy the StarRating.vue component into your project.

Example

<template>
  <div>
    <star-rating v-model="userRating" :max-stars="5" @ratingData="updateRating" />
    <p>Selected rating: {{ userRating }}</p>
  </div>
</template>

<script>
import StarRating from "./StarRating.vue";

export default {
  data() {
    return {
      userRating: 0,
    };
  },
  components: {
    StarRating,
  },
  methods: {
    updateRating(newRating) {
      // Handle the new rating as needed.
      this.userRating = newRating;
    },
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

Component Code

<template>
  <div class="star-rating">
    <div
      v-for="i in maxStars"
      :key="i"
      @click="setRating(i)"
      @mouseover="hoverRating(i)"
      @mouseleave="resetHover"
      :class="['star', i <= (isHovered ? hoverValue : rating) ? 'filled' : '']"
    >
      
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    maxStars: {
      type: Number,
      default: 5,
    },
  },
  setup(props, { emit }) {
    const rating = ref(props.value);
    const isHovered = ref(false);
    const hoverValue = ref(0);

    const setRating = (newRating) => {
      rating.value = newRating;
      emit('ratingData', newRating);
    };

    const hoverRating = (value) => {
      if (isHovered.value) {
        hoverValue.value = value;
      }
    };

    const resetHover = () => {
      hoverValue.value = 0;
    };

    return {
      rating,
      isHovered,
      hoverRating,
      resetHover,
      setRating,
    };
  },
};
</script>

<style scoped>
.star-rating {
  display: inline-block;
}

.star {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  margin: 2px;
  color: rgb(222, 222, 222);
}

.filled {
  color: gold;
}
</style>

Enter fullscreen mode Exit fullscreen mode

Component Explanation

  • The component consists of a group of stars, each of which can be clicked to set a rating.
  • Stars change color on hover and remain filled or unfilled based on the selected rating.
  • Emits the ratingData event to send the selected rating to the parent component.
  • Supports a maxStars prop for specifying the maximum number of stars.
  • Utilizes Vue 3 Composition API for state management with ref.

Styling

  • Stars are styled with a base color of gray and turn gold when filled.
  • Adjustable font size and cursor styles for user interaction.

Props

  • value (Number): Represents the current rating.
  • maxStars (Number): Specifies the maximum number of stars (default: 5).

Events

  • ratingData: Emits the selected rating to the parent component.

Methods

  • setRating(newRating): Sets the current rating and emits the ratingData event.
  • hoverRating(value): Tracks the hovered rating during a hover interaction.
  • resetHover(): Resets the hover value after the mouse leaves the star.

Author

Created by Tahsin Abrar

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

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

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay