Brennan  Veum

Brennan Veum


Vuetify — Star Ratings

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.


The v-rating component lets us add a star rating input to our app.


What is GEEK

Buddha Community

Vuetify — Star Ratings

How to Create Emoji Star Rating Widget using only HTML & CSS

In this blog you’ll learn how to create Emoji Star Rating Widget using only HTML & CSS.

To create emoji star rating widget using only HTML & CSS. First, you need to create two files one HTML File and another one is CSS File.

1: First, create an HTML file with the name of index.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Stars Rating | Codequs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href=""/>
  <div class="wrapper">
    <input type="radio" name="rate" id="star-1">
    <input type="radio" name="rate" id="star-2">
    <input type="radio" name="rate" id="star-3">
    <input type="radio" name="rate" id="star-4">
    <input type="radio" name="rate" id="star-5">
    <div class="content">
      <div class="outer">
        <div class="emojis">
          <li class="slideImg"><img src="emojis/emoji-1.png" alt=""></li>
          <li><img src="emojis/emoji-2.png" alt=""></li>
          <li><img src="emojis/emoji-3.png" alt=""></li>
          <li><img src="emojis/emoji-4.png" alt=""></li>
          li><img src="emojis/emoji-5.png" alt=""></li>
      <div class="stars">
        <label for="star-1" class="star-1 fas fa-star"></label>
        <label for="star-2" class="star-2 fas fa-star"></label>
        <label for="star-3" class="star-3 fas fa-star"></label>
        <label for="star-4" class="star-4 fas fa-star"></label>
        <label for="star-5" class="star-5 fas fa-star"></label>
    <div class="footer">
      <span class="text"></span>
      <span class="numb"></span>

2: Second, create a CSS file with the name of style.css

@import url(';300;400;500;600;700&display=swap');
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#FED151, #DE981F);
  background: #f6f6f6;
  max-width: 360px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
.wrapper .content{
  padding: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
.wrapper .outer{
  height: 135px;
  width: 135px;
  overflow: hidden;
.outer .emojis{
  height: 500%;
  display: flex;
  flex-direction: column;
.outer .emojis li{
  height: 20%;
  width: 100%;
  list-style: none;
  transition: all 0.3s ease;
.outer li img{
  height: 100%;
  width: 100%;
#star-2:checked ~ .content .emojis .slideImg{
  margin-top: -135px;
#star-3:checked ~ .content .emojis .slideImg{
  margin-top: -270px;
#star-4:checked ~ .content .emojis .slideImg{
  margin-top: -405px;
#star-5:checked ~ .content .emojis .slideImg{
  margin-top: -540px;
.wrapper .stars{
  margin-top: 30px;
.stars label{
  font-size: 30px;
  margin: 0 3px;
  color: #ccc;
#star-1:hover ~ .content .stars .star-1,
#star-1:checked ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-2,
#star-2:checked ~ .content .stars .star-1,
#star-2:checked ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-1,
#star-3:hover ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-3,
#star-3:checked ~ .content .stars .star-1,
#star-3:checked ~ .content .stars .star-2,
#star-3:checked ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-1,
#star-4:hover ~ .content .stars .star-2,
#star-4:hover ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-4,
#star-4:checked ~ .content .stars .star-1,
#star-4:checked ~ .content .stars .star-2,
#star-4:checked ~ .content .stars .star-3,
#star-4:checked ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-1,
#star-5:hover ~ .content .stars .star-2,
#star-5:hover ~ .content .stars .star-3,
#star-5:hover ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-5,
#star-5:checked ~ .content .stars .star-1,
#star-5:checked ~ .content .stars .star-2,
#star-5:checked ~ .content .stars .star-3,
#star-5:checked ~ .content .stars .star-4,
#star-5:checked ~ .content .stars .star-5{
  color: #fd4;
.wrapper .footer{
  border-top: 1px solid #ccc;
  background: #f2f2f2;
  width: 100%;
  height: 55px;
  padding: 0 20px;
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
.footer span{
  font-size: 17px;
  font-weight: 400;
.footer .text::before{
  content: "Rate your experience";
.footer .numb::before{
  content: "0 out of 5";
#star-1:checked ~ .footer .text::before{
  content: "I just hate it";
#star-1:checked ~ .footer .numb::before{
  content: "1 out of 5";
#star-2:checked ~ .footer .text::before{
  content: "I don't like it";
#star-2:checked ~ .footer .numb::before{
  content: "2 out of 5";
#star-3:checked ~ .footer .text::before{
  content: "This is awesome";
#star-3:checked ~ .footer .numb::before{
  content: "3 out of 5";
#star-4:checked ~ .footer .text::before{
  content: "I just like it";
#star-4:checked ~ .footer .numb::before{
  content: "4 out of 5";
#star-5:checked ~ .footer .text::before{
  content: "I just love it";
#star-5:checked ~ .footer .numb::before{
  content: "5 out of 5";
  display: none;

Now you’ve successfully created a Pure CSS Emoji Star Rating Widget.

James Ellis

James Ellis


Collection of 5 Vue Rating Components for Vue.js Application

The Rating component for Vue represents a widget that allows you to choose a rating. You can configure the Vue Rating items size, image and the number of displayed items. In this article, I will introduce you to 5 rating components that I have collected.

1. Star Rating Component for Vue 2.x

Need more than stars? Check out vue-rate-it with hundreds of different raters built in!

A simple, highly customisable star rating component for Vue 2.x.

Star Rating Component for Vue 2.x



2. VueStar

A like button with delightful star animation powered by Vue.js.



3. V-Rating

Rating component in Semantic-UI made with VueJS (< 1kB, blazing fast)

Simple ui rating component for Vue made with Semantic-UI.

This is on GitHub so let me know if I’ve b0rked it somewhere, give me a star :star: if you like it :beers:




4. vue-dynamic-star-rating

A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)




5. Flexible VueJS

Flexible VueJS input control for ratings (stars, etc.)

Flexible VueJS



I hope you like them!

#vue #vue-rating #rating-component #star-rating

A Flutter Package to Rate Items in Stars

#Rate In Stars Rate In Stars allows you to rate items in your Flutter app.


  1. Add the latest version of package to your pubspec.yaml (and run 'dart pub get'):
    rate_in_stars: ^0.0.1
  1. Import the package and ise it in your Flutter app.
import 'package:rate_in_stars/rate_in_stars.dart';


The rating can be editable - dynamic, or non editable - static.


There are a number of properties that you can modify:

  • rating
  • editable
  • iconSize
  • color
class RatingStarsWidget extends StatelessWidget {
  const RatingStarsWidget({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      body: RatingStars(
        editable: true,
        rating: 3.5,
        color: Colors.amber,
        iconSize: 32,

Next Steps

  • Accept different icon types

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add rate_in_stars

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

  rate_in_stars: ^0.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:rate_in_stars/rate_in_stars.dart'; 

Download Details:

Author: SamiaTheDev

Source Code:

#flutter #star 

Using 'star-rating.js' for Star Rating with JavaScript Library


star-rating.js is a small JavaScript library to generate a customizable, progressively enhancement star rating control from a regular select box with numeric values.

How to use it:

1. Create a select box for your star rating system.

<select class="star-rating">
    <option value="">Select a rating</option>
    <option value="5">Excellent</option>
    <option value="4">Very Good</option>
    <option value="3">Average</option>
    <option value="2">Poor</option>
    <option value="1">Terrible</option>

2. Install & download the star-rating.js.

# Yarn
$ yarn add star-rating.js

$ npm install star-rating.js --save

3. Load necessary JavaScript and CSS files in the document.

<link href="dist/star-rating.css" rel="stylesheet" />
<script src="dist/star-rating.min.js"></script>

4. Initialize the library on the select box and done.

var starRatingControl = new StarRating( '.star-rating' );

5. Set the maximum number of stars allowed to select. Default: 10.

var starRatingControl = new StarRating('.star-rating',{
    maxStars: 5

6. Determine whether or not to show the label next to the star rating control. Default: true.

var starRatingControl = new StarRating('.star-rating',{
    showText: false

7. Determine whether or not to clear the rating by clicking on the selected stars. Default: true.

var starRatingControl = new StarRating('.star-rating',{
    showText: false

8. More configuration options.

var starRatingControl = new StarRating('.star-rating',{
    classname: "gl-star-rating"
    initialText: "Select a Rating"

9. You can also pass the options object to the data-options in your select element.

<select class="star-rating" data-options='{"clearable":false, "showText":false}'>

10. Destroy & re-init the star rating control.


11. Override the default CSS styles in the star-rating.scss.

$star-rating-defaults: (
  base-classname : 'gl-star-rating',
  base-display   : block,
  base-height    : 26px,
  font-size      : 0.8em,
  font-weight    : 600,
  parent         : '',
  star-empty     : url(../img/star-empty.svg),
  star-full      : url(../img/star-full.svg),
  star-half      : url(../img/star-half.svg),
  star-size      : 24px,
  text-background: #1a1a1a,
  text-color     : #fff,

Thank you for reading! Please share if you liked it!

#javascript #css #jQuery #Star Rating

Monty  Boehm

Monty Boehm


5 Best React Star Rating Libraries

In this article, we take a look at the 5 Best React Star Rating Libraries

1 - React Star Ratings

Customizable react star ratings. SVG stars that show aggregate star ratings to the hundreths decimal point.


npm install --save react-star-ratings

Heads up

I made a better version (in my opinion at least) of this repo right here: react-ratings-declarative

It is a lot more extendable and customizable.


import StarRatings from './react-star-ratings';

class Foo extends Component {
    changeRating( newRating, name ) {
        rating: newRating

    render() {
      // rating = 2;
      return (

class Bar extends Component {
  render() {
    // aggregateRating = 2.35;
    return (

View Github

2 - React star rate

Lightweight, customizable star ratings component for React


  • 🔩 Easily Customizable
  • 🕊 Lightweight - less than 4kb including styles
  • Accessible


You can visit the example here:
View on CodeSandbox


With yarn

yarn add react-star-rate

With NPM

npm install react-star-rate

Getting Started

You can add React Stars Rating to your project using the <StarsRating /> component.

import { useState } from 'react';

import StarsRating from 'react-star-rate';

const App = () => {
  const [value, setValue] = useState(0);
  return (
        onChange={value => {

View Github

3 - React Rating

React Rating is a react rating component which supports custom symbols both with inline styles and glyphicons found in popular CSS Toolkits like Fontawesome or Bootstrap.

This React component was inspired by the jQuery plugin bootstrap-rating.


You can install react-rating component using the npm package manager:

npm install --save react-rating


The react-rating component peer depends on the React library.

You can install React using npm too:

npm install --save react

Upgrade Warning

If you are using a version of React Rating < v1.0 be aware that there are API changes between anything < v1.0 and v1.0 . See the Properties and Deprecated Properties and Callbacks sections below for a documentation of the current API and how it compares to the old.


Require the Rating Component

var Rating = require('react-rating');

Start using it

With raw javascript:


Or with JSX:

<Rating />

View Github

4 - React-rater

Interative & customizable star rater

Star rater 



npm install react-rater
import Rater from 'react-rater'
import 'react-rater/lib/react-rater.css'

// ...
render() {
  return (<Rater total={5} rating={2} />)

Note: If your react version is under 16.8.0 without hooks support, please keep using react-rater@5


<Rater total={} rating={} interactive={} onRate={} onRating={} />

All attributes are optional.

  • total: Number, default 5
  • rating: Number, default 0
  • interactive: Boolean, default true. Create a read-only rater by setting this attribute to false.
  • onRate: function({ rating }). Callback to retrieve rating value. Called after rated.
  • onRating: function({ rating }). Callback to retrieve rating value. Called during rating (mouse moving between stars).
  • onCancelRate: function({ rating }). Called when mouse moves out from rater.

From version 5.0.0, callback is split into onRate & onRating & onCancelRate. onRate is called when mouse click, while onRating is called when mouse moves between star components and onCancelRate is called when mouse leaves rater. Usually you only need onRate.

Read-only mode

Set interactive={false} to create a read-only rater.

In read-only mode, rating could contain a fractional part like 3.6. (Thanks to @devmtnaing)


onRate & onRating

(rating is passed with the React's SyntheticEvent)

  rating: Number


The CSS way

$react-rater-link: #ccc !default; // color of star not rated
$react-rater-hover: #666 !default; // color of star on hover
$react-rater-active: #000 !default; // color of star rated

The JS way

<Rater /> will repeat its children until counts reach total.

In this way you can define your own 'star' component (src/star.js).

<Rater total={5}>
  <Heart />

and style it based on these props:

  isActive: PropTypes.bool,
  isActiveHalf: PropTypes.bool,
  willBeActive: PropTypes.bool,
  isDisabled: PropTypes.bool

View Github

5 - React-rating

Zero-dependency, highly customizable rating component for React.


  • Use any SVG: No headaches, icon fonts or packages to install in order to use your favorite shapes.
  • Smart half-fill and advanced behavior customization
  • Dead simple per-active-item styling
  • Truly responsive and mobile-first
  • Fully accessible with keyboard navigation and custom/default labels
  • Simple and clean DOM structure
  • Works both on the server and the client
  • Lightweight with zero dependencies
  • Fully typed with IntelliSense infos and autocomplete


yarn add @smastrom/react-rating
# npm install --save @smastrom/react-rating

Basic usage

Import the CSS and the component

import { Rating } from '@smastrom/react-rating';

import '@smastrom/react-rating/style.css';



import styles from '@smastrom/react-rating/style.css';

export function links() {
  return [{ rel: 'stylesheet', href: styles }];

export default function App() {
  // ...

in any page/component:

import { Rating } from '@smastrom/react-rating';

export default function Index() {
  // ...



import '@smastrom/react-rating/style.css';

function MyApp({ Component, pageProps }) {
  // ...

in any page/component:

import { Rating } from '@smastrom/react-rating';

export default function Home() {
  // ...


gatsby-browser.js - Create the file at the root of your project if it doesn't exist, and relaunch the dev server.

import '@smastrom/react-rating/style.css';

in any page/component:

import { Rating } from '@smastrom/react-rating';

const IndexPage = () => {
  // ...



import '@smastrom/react-rating/style.css';

in any component:

import { Rating } from '@smastrom/react-rating';

const App = () => {
  // ...

Create React App


import '@smastrom/react-rating/style.css';

in any component:

import { Rating } from '@smastrom/react-rating';

const App = () => {
  // ...

Give it a max-width and init the state

Since Rating will span across the entire container, define a maximum width via inline styles, css class or wrap it in a responsive container:

const App = () => {
  const [ratingValue, setRatingValue] = useState(3); // <-- Init with 0 for no initial value

  return (
      style={{ maxWidth: 250 }}
      onChange={(selectedValue) => setRatingValue(selectedValue)}

CSS Class


.my-rating-class {
  max-width: 600px;


import 'my-styles.css';

const App = () => {
  const [ratingValue, setRatingValue] = useState(3);

  return (
      onChange={(selectedValue) => setRatingValue(selectedValue)}

Responsive container

const App = () => {
  const [ratingValue, setRatingValue] = useState(3);

  return (
    <div style={{ maxWidth: 600, width: '100%' }}>
        onChange={(selectedValue) => setRatingValue(selectedValue)}

View Github

#react #star #rating