Ratings Component

A simple React component for displaying and collecting ratings.

Example Preview

Ratings Example

Usage

Import the Ratings component in your React application and use it as follows:

import React from "react";
import { Ratings } from "@/@core";
 
const YourComponent = () => {
  return (
    <div>
      <h2>Your Component Title</h2>
      <Ratings />
    </div>
  );
};
 
export default YourComponent;

Properties

Property	Type	Default	Description
`start`	number	0	Range starting value (exclusive).
`stop`	number	5	Range stop value (inclusive).
`step`	number	1	Describes how many values each Symbol represents. For example, for a `start` value of 0, a `stop` value of 10 and a `step` of 2, we will end up with 5 Symbols, with each Symbol representing value increments of 2.
`fractions`	number	1	Number of equal subdivisions that can be selected as a rating in each Symbol. For example, for a `fractions` value of 2, you will be able to select a rating with a precision of down to half a Symbol. Must be >= 1
`initialRating`	number	0	The value that will be used as an initial rating. This is the old `initialRate`.
`placeholderRating`	number	0	If you do not define an `initialRating` value, you can use a placeholder rating. Visually, this will have the same result as if you had defined an `initialRating` value. If `initialRating` is set `placeholderRating` is not taken into account. This is the old `placeholderRate`
`readonly`	bool	false	Whether the rating can be modified or not.
`quiet`	bool	false	Whether to animate rate hovering or not.
`direction`	ltr or rtl	ltr	The direction of the rating element contents
`emptySymbol`	element or object or string or array	Style.empty	React element, inline style object, or classes applied to the rating symbols when empty. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old `empty`.
`fullSymbol`	element or object or string or array	Style.full	React element, inline style object, or classes applied to the rating symbols when full. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old `full`.
`placeholderSymbol`	element or object or string or array	Style.placeholder	React element, inline style object, or classes applied to the placeholder rating symbols. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old `placeholder`.

Callbacks

Callback	Type	Description
`onChange`	function (value)	Gets called with the `value` when a different value than the currently set is selected.
`onClick`	function (value)	Gets called with the `value` when a symbol is clicked. The value is equal to the value that corresponds to that part of the symbol.
`onHover`	function (value)	Gets called with the `value` when you hover over a symbol. The value is equal to the value that corresponds to that part of the symbol. Gets called in `quiet` mode too. When hover ends, gets called with no `value` (i.e. `undefined` as the value).

Deprecated Properties and Callbacks

This is a list of deprecated properties and callbacks from versions older than v1.0

onRate
initialRate
placeholderRate
empty
full
placeholder

Preview Example Code

import React from "react";
import { Ratings, BoxItem } from "@/@core";
 
const YourComponent = () => {
  return (
    <BoxItem className={"bg-base-100 rounded max-w-xs w-full"}>
      <div className="flex flex-col gap-1">
        <Ratings initialRating={3} />
        <Ratings
          initialRating={3.5}
          emptySymbol={
            <IconifyIcon
              icon={"line-md:star-filled"}
              className={"text-base-content/30 w-10 h-10"}
            />
          }
          fullSymbol={
            <IconifyIcon
              icon={"line-md:star-filled"}
              className={"text-secondary w-10 h-10"}
            />
          }
        />
        <Ratings
          initialRating={4.5}
          emptySymbol={
            <IconifyIcon
              icon={"line-md:emoji-smile-wink-twotone"}
              className={"text-base-content/30 w-10 h-10"}
            />
          }
          fullSymbol={
            <IconifyIcon
              icon={"line-md:emoji-smile-wink-twotone"}
              className={"text-secondary w-10 h-10"}
            />
          }
        />
        <Ratings
          initialRating={5}
          fullSymbol={
            <IconifyIcon
              icon={"line-md:heart-filled"}
              className={"text-warning w-10 h-10"}
            />
          }
          emptySymbol={
            <IconifyIcon
              icon={"line-md:heart-filled"}
              className={"text-base-content/50 w-10 h-10"}
            />
          }
        />
      </div>
    </BoxItem>
  );
};

Examples

For more detailed examples and customization options, refer to the example files or demos in your package.

Range Slider Select