React Rating

Rating working example

Rating component

import React, { useRef, useEffect } from "react";
import jSuites from "jsuites";

import "jsuites/dist/jsuites.css";

export default function Rating({ options }) {
  const ratingRef = useRef(null);

  const jsuitesRatingRef = useRef(null);

  useEffect(() => {
    if (!jsuitesRatingRef.current) {
      jsuitesRatingRef.current = jSuites.rating(ratingRef.current, options);
    } else {
      jsuitesRatingRef.current.setOptions(options, true);
    }
  }, [options]);

  return <div ref={ratingRef} />;
}
  

Component usage

import React, { useState } from "react";

import Rating from "./Rating";

export default function App() {
  const [ratingValue, setRatingValue] = useState(0);

  const handleRatingChange = (element, value) => {
    setRatingValue(parseInt(value, 10));
  };

  return (
    <Rating
      options={{
        value: ratingValue,
        onchange: handleRatingChange,
        number: 4
      }}
    />
  );
}