Star Rating Vue

A high-precision star rating component for Vue 3 with fractional star support using canvas-based area calculation. Features accessibility support, customizable colors and sizes, and precise fractional ratings.

Features

• 🎯 Precise Fractional Ratings - Canvas-based area calculation for accurate fractional star display
• ♿ Accessible - ARIA labels and proper semantic markup
• 🎨 Customizable - Size, color, and number of stars
• ⚡ Performance Optimized - Built-in caching for same-size components
• 📱 Responsive - Works on all screen sizes
• 🎪 Vue 3 Ready - Compatible with Composition API and Options API
• 🖨️ SSR Compatible - Safe for server-side rendering with fallbacks

Installation

npm install @codewithmannan/star-rating-vue

Usage

Basic Usage

<template>
  <StarRating :rating="3.5" />
</template>

<script setup>
import StarRating from "@codewithmannan/star-rating-vue";
</script>

Advanced Usage with Props

<template>
  <div>
    <StarRating
      :rating="4.7"
      :max="5"
      size="32px"
      color="#FFD055"
      :samplingMultiplier="10"
    />
  </div>
</template>

<script setup>
import StarRating from "@codewithmannan/star-rating-vue";
</script>

Integration in Recipe App Example

<template>
  <div class="recipe-container">
    <div class="recipe-header">
      <h1>{{ recipe.name }}</h1>

      <div class="food-rating">
        <div class="stars">
          <StarRating :rating="recipe?.stats?.rating || 0" />
        </div>
        <div class="rating-text">
          {{
            `${recipe?.stats?.rating || 0}/5 (${
              recipe?.stats?.reviews || 0
            } reviews)`
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import StarRating from "@codewithmannan/star-rating-vue";

const recipe = ref({});

onMounted(async () => {
  // Load your recipe data
  recipe.value = {
    name: "Delicious Pasta",
    stats: {
      rating: 4.5,
      reviews: 24,
    },
  };
});
</script>

Props

| Prop | Type | Default | Description | | -------------------- | ------ | ------------ | ---------------------------------------------------- | | rating | Number | Required | Current rating value (e.g., 3.5, 4.0) | | max | Number | 5 | Maximum number of stars | | size | String | "24px" | Size of stars in pixels (e.g., "24px", "32px") | | color | String | "#FFD055" | Color for filled stars | | samplingMultiplier | Number | 10 | Precision multiplier for fractional star calculation |

Handling Loading States

Since ratings might be undefined during data loading, use the nullish coalescing operator:

<StarRating :rating="recipe?.stats?.rating || 0" />

How It Works

The component uses an innovative canvas-based approach for precise fractional star rendering:

1. Precise Area Calculation: Rasterizes the star shape using offscreen canvas
2. Cumulative Distribution: Builds a CDF (Cumulative Distribution Function) for the star shape
3. Smart Clipping: Uses SVG clip paths based on the precise area calculation
4. Performance Caching: Caches calculations per size to avoid recomputation

This ensures that fractional stars (like 4.3) display the exact correct filled area, not just linear approximations.

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Accessibility

The component includes:

• ARIA labels for screen readers
• Semantic HTML structure
• Proper role attributes
• Keyboard navigation support

License

MIT License - feel free to use in your projects.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you have any issues or questions, please open an issue on the GitHub repository.

Note: Make sure to handle potential undefined values for ratings during data loading to avoid console warnings.