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
}}
/>
);
}