Rating

The RhRating is a component that displays a rating control with customizable icons and behavior. It allows the user to select a rating value from a set of icons and provides props for customizing the appearance and behavior of the icons, such as disabling hover effects, setting the precision of the rating, and highlighting only the selected icons.

Usage

Once installed, you can import the RhRating component into your React application:

copy

import {RhRating} from "@rhythm-ui/react"

Then, you can use the RhRating component in your JSX code:

copy

<RhRating value={0} />

Rating Props

Name	Type	Default	Description
max	number	5	Maximum rating (based on this number of icons will render)
value	number		Rating value
precision	1 \| 0.25 \| 0.5	1	Set precision of rating
disableHover	boolean	false	Disable hover effect
onChange	(value: number) => void		Function to get changed rating value
iconFilled	(value: number) => ReactElement<any, string \| JSXElementConstructor<any>>	() => ( <RhIcon icon='heroicons:star-solid' className='text-amber-500 text-2xl' /> )	Accepts a function that returns a react element to display @param value the rating Value @returns
iconEmpty	(value: number) => ReactElement<any, string \| JSXElementConstructor<any>>	() => ( <RhIcon icon='heroicons:star' className='text-gray-400 text-2xl' /> )	Accepts a function that returns a react element to display @param value the rating Value @returns
highlightSelectedOnly	boolean		Highlight only selected icon
readOnly	boolean		Removes all hover effects and pointer events.
className	string		ClassName to give custom classes

Disable Hover

The disableHover prop is a boolean that, when set to true, disables the hover effect on the rating icons. This means that the icons will not change appearance when the user hovers over them with the mouse cursor.

copy

function DisableHover() {
  const [rating, setRating] = useState(0);
  return (
    <RhRating
      value={rating}
      onChange={(value) => setRating(value)}
      disableHover={true}
    />
  );
}

Read Only

The readOnly prop is a boolean that, when set to true, removes all hover effects and pointer events on the rating icons. This means the user will not be able to change the rating value

copy

<RhRating readOnly={true} value={3} />

Custom Icon

The iconFilled and iconEmpty props are functions that return React elements to display filled and empty rating icons, respectively. These functions accept a parameter called "value" which is the rating value and return a React element.

copy

function CustomIcon() {
  const [rating, setRating] = useState(0);
  return (
    <RhRating
      value={rating}
      onChange={(value) => setRating(value)}
      iconFilled={(value) => <RhIcon icon="heroicons:heart-solid" width="32" />}
      iconEmpty={() => (
        <RhIcon
          icon="heroicons:heart"
          width="32"
          className="text-slate-400 text-xl"
        />
      )}
    />
  );
}

Highlight Selected Only

The highlightSelectedOnly prop is a boolean that, when set to true, highlights only the selected rating icons. This means that only the icons that represent the current rating value will have a different appearance, while the rest of the icons will remain unchanged.

copy

function HighlightSelectedOnly() {
  const [rating, setRating] = useState(0);
  return (
    <RhRating
      highlightSelectedOnly={true}
      max={4}
      value={rating}
      onChange={(value) => setRating(value)}
      iconFilled={(value) => (
        <RhIcon
          icon={
            value == 1
              ? "twemoji:loudly-crying-face"
              : value == 2
              ? "twemoji:disappointed-face"
              : value == 3
              ? "twemoji:slightly-smiling-face"
              : "twemoji:star-struck"
          }
          width="32"
        />
      )}
      iconEmpty={(value) => (
        <RhIcon
          icon={
            value == 1
              ? "twemoji:loudly-crying-face"
              : value == 2
              ? "twemoji:disappointed-face"
              : value == 3
              ? "twemoji:slightly-smiling-face"
              : "twemoji:star-struck"
          }
          width="32"
          className="grayscale"
        />
      )}
      className="gap-4"
    />
  );
}

Precision

The precision prop determines the level of precision for the rating value. It is a number that can be set to 1, 0.25, or 0.5. The default value is 1, which means that the rating can only be set to whole numbers. If precision is set to 0.5, the rating can be set to half-star increments, and if set to 0.25, the rating can be set to quarter-star increments.

copy

function Precision() {
  function PrecisionR({ pr }) {
    const [rating, setRating] = useState(0);
    return (
      <div className="text-center">
        <p>{pr}</p>
        <RhRating
          precision={pr}
          value={rating}
          onChange={(value) => setRating(value)}
        />
      </div>
    );
  }
  return (
    <div className="flex justify-around items-center p-4">
      <PrecisionR pr={1} />
      <PrecisionR pr={0.5} />
      <PrecisionR pr={0.25} />
    </div>
  );
}