Basic usage
function App() { const [rating, setRating] = useState(3); return ( <Rating style={{ maxWidth: 180 }} value={rating} onChange={setRating} /> ) }Container size
Basic usage - Read only
function App() { return ( <Rating style={{ maxWidth: 180 }} value={3} readOnly /> ); }Disabled
function App() { const [rating, setRating] = useState(0); return ( <Rating style={{ maxWidth: 180 }} value={rating} onChange={setRating} isDisabled /> ); }Required
function App() { const [rating, setRating] = useState(0); return ( <Rating style={{ maxWidth: 180 }} value={rating} onChange={setRating} isRequired /> ); }Highlight only selected
function App() { const [rating, setRating] = useState(3); return ( <Rating style={{ maxWidth: 180 }} value={rating} onChange={setRating} highlightOnlySelected /> ); }Reset on click outside
function App() { const ratingRef = useRef(null); const [rating, setRating] = useState(0); useEffect(() => { const handleOutsideClick = (event) => { if (!ratingRef.current.contains(event.target)) { setRating(0); } }; document.addEventListener('click', handleOutsideClick); return () => { document.removeEventListener('click', handleOutsideClick); }; }, []); return ( <Rating style={{ maxWidth: 180 }} ref={ratingRef} value={rating} onChange={setRating} /> ); }Custom feedback
function getRating(rating) { switch (rating) { case 1: return 'Poor'; case 2: return 'Nothing special'; case 3: return 'Average'; case 4: return 'Very good'; case 5: return 'Excellent'; default: return 'None'; } } function App() { const [rating, setRating] = useState(3); const [hoveredRating, setHoveredRating] = useState(0); return ( <div style={{ maxWidth: 180, width: '100%' }}> <Rating value={rating} onChange={setRating} onHoverChange={setHoveredRating} /> <div> <div>{`Selected: ${getRating(rating)}`}</div> <div>{`Hovered: ${getRating(hoveredRating)}`}</div> </div> </div> ); }Selected: Average
Hovered: None
Asynchronous onChange
function App() { const [rating, setRating] = useState(3); const [isReadOnly, setIsReadOnly] = useState(false); async function handleAsyncSubmission(selectedValue) { try { setIsReadOnly(true); setRating(selectedValue); await new Promise((resolve) => setTimeout(() => resolve("Successfully submitted!"), 2000)); } catch (err) { setIsReadOnly(false); setRating(0); } } return ( <Rating style={{ maxWidth: 180 }} readOnly={isReadOnly} value={rating} onChange={handleAsyncSubmission} /> ); }Multiple ratings in a form
function App() { const [data, setData] = useState({ name: '', cleanliness: 2, staff: 3, location: 0, }); function handleSubmit(event) { event.preventDefault(); alert(JSON.stringify(data, undefined, 2)); } return ( <form onSubmit={handleSubmit} maxWidth: 180, width: '100%', > <label htmlFor="name"> Your name <input type="text" id="name" onChange={(event) => setData((prevData) => ({ ...prevData, name: event.target.value })) } /> </label> <div> <div id="cleanliness_rating">Cleanliness</div> <Rating isRequired value={data.cleanliness} visibleLabelId="cleanliness_rating" onChange={(selectedValue) => setData((prevData) => ({ ...prevData, cleanliness: selectedValue })) } /> </div> <div> <div id="staff_rating">Staff</div> <Rating isRequired value={data.staff} visibleLabelId="staff_rating" onChange={(selectedValue) => setData((prevData) => ({ ...prevData, staff: selectedValue })) } /> </div> <div> <div id="location_rating">Location</div> <Rating isRequired value={data.location} visibleLabelId="location_rating" onChange={(selectedValue) => setData((prevData) => ({ ...prevData, location: selectedValue })) } /> </div> <button type="submit">Submit review</button> </form> ); }React Hook Form
function App() { const { register, handleSubmit, control, formState: { errors }, } = useForm({ mode: 'onBlur', defaultValues: { name: '', rating: 0, }, }); function onSubmit(data) { alert(JSON.stringify(data, undefined, 2)); } return ( <form onSubmit={handleSubmit(onSubmit)}> <label htmlFor="name"> Your name <input type="text" id="name" {...register('name', { required: true })} /> </label> {errors.name && <div>Name is required.</div>} <div> <div id="rating_label">Rating</div> <Controller control={control} name="rating" rules={{ validate: (rating) => rating > 0, }} render={({ field: { onChange, onBlur, value } }) => ( <Rating value={value} isRequired onChange={onChange} visibleLabelId="rating_label" onBlur={onBlur} /> )} /> {errors.rating && <div>Rating is required.</div>} </div> <button type="submit"> Submit review </button> </form> ); }Included shapes
import { Rating, Star, ThinStar, RoundedStar, ThinRoundedStar, StickerStar } from '@smastrom/react-rating'; const includedShapesStyles = [Star, ThinStar, RoundedStar, ThinRoundedStar, StickerStar].map( (itemShapes) => ({ itemShapes, activeFillColor: '#f59e0b', inactiveFillColor: '#ffedd5' }) ); function App() { const [rating, setRating] = useState(3); return ( <div> {includedShapesStyles.map((itemStyles, index) => ( <Rating key={`shape_${index}`} value={rating} onChange={setRating} itemStyles={itemStyles} /> ))} </div> ) }Container size
Custom shape and colors
const StarDrawing = ( <path d="M398.799,141.794c-43.394-3.977-86.776-6.52-130.158-8.418C258.835,99.302,242.633-4.751,193.173,0.169 c-39.659,3.944-61.012,90.515-73.08,130.306c-32.333,0.283-64.692,1.062-97.09,2.416c-14.735,0.615-27.908,17.9-18.207,31.732 c19.157,27.316,44.198,49.389,70.487,70.103c-11.83,38.196-21.665,77.499-29.759,116.53c-3.504,16.91-5.31,32.212,3.881,44.82 c2.411,9.987,12.018,18.494,22.429,18.029c51.805-2.313,93.872-44.738,133.991-77.119c33.156,26.317,66.309,52.64,99.475,78.951 c12.835,10.183,37.057,5.178,35.798-14.828c-3.039-48.158-15.477-96.473-30.599-144.041c32.951-25.229,65.899-50.459,99.11-75.353 C426.818,168.817,420.858,143.814,398.799,141.794z" /> ); // Source: https://www.svgrepo.com/svg/118939/star const customStyles = { itemShapes: StarDrawing, activeFillColor: '#22C55E', inactiveFillColor: '#BBF7D0', }; function App() { const [rating, setRating] = useState(4); return ( <Rating style={{ maxWidth: 300 }} value={rating} onChange={setRating} itemStyles={customStyles} /> ); }Custom box colors
const Heart = ( <path d="M433.5,67c-25.3-25.3-59-39.3-94.8-39.3s-69.6,14-94.9,39.4l-7.3,7.3l-7.5-7.5 c-25.4-25.4-59.1-39.4-95-39.4c-35.8,0-69.4,13.9-94.7,39.3C13.9,92.2,0,125.9,0,161.7s14,69.5,39.4,94.8l182.7,182.7 c3.8,3.8,9,6,14.5,6c5.4,0,10.6-2.2,14.5-6l182.2-182.4c25.4-25.4,39.3-59.1,39.4-94.9S458.8,92.4,433.5,67z M132.5,117.2 c-23.9,0-43.4,19.5-43.4,43.4c0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-45.8,37.3-83.1,83.1-83.1c11,0,19.9,8.9,19.9,19.9 C152.4,108.4,143.5,117.2,132.5,117.2z" /> ); // Source: https://www.svgrepo.com/svg/40627/heart const customStyles = { itemShapes: Heart, activeFillColor: 'white', activeBoxColor: '#EC4899', inactiveFillColor: 'white', inactiveBoxColor: '#FBCFE8', }; function App() { const [rating, setRating] = useState(4); return ( <Rating style={{ maxWidth: 360 }} value={rating} onChange={setRating} itemStyles={customStyles} transition="position" radius="medium" spaceInside="large" spaceBetween="small" /> ); }Custom active colors
const Star = ( <path d="M62 25.154H39.082L32 3l-7.082 22.154H2l18.541 13.693L13.459 61L32 47.309L50.541 61l-7.082-22.152L62 25.154z" /> ); // Source: https://www.svgrepo.com/svg/353297/star const customStyles = { itemShapes: Star, boxBorderWidth: 2, activeFillColor: ['#FEE2E2', '#FFEDD5', '#FEF9C3', '#ECFCCB', '#D1FAE5'], activeBoxColor: ['#da1600', '#db711a', '#dcb000', '#61bb00', '#009664'], activeBoxBorderColor: ['#c41400', '#d05e00', '#cca300', '#498d00', '#00724c'], inactiveFillColor: 'white', inactiveBoxColor: '#dddddd', inactiveBoxBorderColor: '#a8a8a8', }; function App() { const [rating, setRating] = useState(4); return ( <Rating style={{ maxWidth: 500 }} value={rating} onChange={setRating} itemStyles={customStyles} radius="large" spaceBetween="small" spaceInside="large" /> ); }Half-fill - SVG
const floatValues = [0.29, 1.44, 2.31, 3.48, 4.52]; function App() { return ( <div> <div style={{ maxWidth: 180, width: '100%' }}> {floatValues.map((value) => ( <Rating readOnly value={value} key={value} /> ))} </div> <Rating style={{ maxWidth: 30 }} readOnly orientation="vertical" value={4.52} /> </div> ) }Half-fill - Box
import { Rating, ThinStar } from "@smastrom/react-rating"; const customStyles = { itemShapes: ThinStar, activeBoxColor: ['#e7040f', '#ff6300', '#ffde37', '#61bb00', '#19a974'], inactiveBoxColor: '#C7C7C7', inactiveFillColor: 'white', }; const floatValues = [0.29, 1.44, 2.31, 3.48, 4.52]; function App() { return ( <div> <div style={{ maxWidth: 180, width: '100%' }}> {floatValues.map((value) => ( <Rating key={value} value={value} itemStyles={customStyles} readOnly spaceBetween="small" halfFillMode="box" /> ))} </div> <Rating style={{ maxWidth: 30 }} readOnly value={4.52} itemStyles={customStyles} orientation="vertical" halfFillMode="box" spaceBetween="small" /> </div> ) }Faces rating
// Collection source: https://www.svgrepo.com/collection/fluent-ui-icons-outlined const SadFace = ( <path d="M12.0000002,1.99896738 C17.523704,1.99896738 22.0015507,6.47681407 22.0015507,12.0005179 C22.0015507,17.5242217 17.523704,22.0020684 12.0000002,22.0020684 C6.47629639,22.0020684 1.99844971,17.5242217 1.99844971,12.0005179 C1.99844971,6.47681407 6.47629639,1.99896738 12.0000002,1.99896738 Z M12.0000002,3.49896738 C7.30472352,3.49896738 3.49844971,7.30524119 3.49844971,12.0005179 C3.49844971,16.6957946 7.30472352,20.5020684 12.0000002,20.5020684 C16.6952769,20.5020684 20.5015507,16.6957946 20.5015507,12.0005179 C20.5015507,7.30524119 16.6952769,3.49896738 12.0000002,3.49896738 Z M12.0000001,13.4979816 C13.6312483,13.4979816 15.1603686,14.1528953 16.2810488,15.2934358 C16.5713583,15.5888901 16.5671876,16.0637455 16.2717333,16.354055 C15.976279,16.6443646 15.5014236,16.6401939 15.211114,16.3447396 C14.3696444,15.4883577 13.2246935,14.9979816 12.0000001,14.9979816 C10.7726114,14.9979816 9.62535029,15.4905359 8.78347552,16.3502555 C8.49366985,16.6462041 8.01882223,16.6511839 7.72287367,16.3613782 C7.4269251,16.0715726 7.4219453,15.5967249 7.71175097,15.3007764 C8.83296242,14.155799 10.3651558,13.4979816 12.0000001,13.4979816 Z M9.00044779,8.75115873 C9.69041108,8.75115873 10.2497368,9.3104845 10.2497368,10.0004478 C10.2497368,10.6904111 9.69041108,11.2497368 9.00044779,11.2497368 C8.3104845,11.2497368 7.75115873,10.6904111 7.75115873,10.0004478 C7.75115873,9.3104845 8.3104845,8.75115873 9.00044779,8.75115873 Z M15.0004478,8.75115873 C15.6904111,8.75115873 16.2497368,9.3104845 16.2497368,10.0004478 C16.2497368,10.6904111 15.6904111,11.2497368 15.0004478,11.2497368 C14.3104845,11.2497368 13.7511587,10.6904111 13.7511587,10.0004478 C13.7511587,9.3104845 14.3104845,8.75115873 15.0004478,8.75115873 Z" /> ); const NeutralFace = ( <> <path d="M9.00051 8.75122C9.69047 8.75122 10.2498 9.31055 10.2498 10.0005C10.2498 10.6905 9.69047 11.2498 9.00051 11.2498C8.31055 11.2498 7.75122 10.6905 7.75122 10.0005C7.75122 9.31055 8.31055 8.75122 9.00051 8.75122Z" /> <path d="M15.0005 8.75122C15.6905 8.75122 16.2498 9.31055 16.2498 10.0005C16.2498 10.6905 15.6905 11.2498 15.0005 11.2498C14.3105 11.2498 13.7512 10.6905 13.7512 10.0005C13.7512 9.31055 14.3105 8.75122 15.0005 8.75122Z" /> <path d="M8.25 15C7.83579 15 7.5 15.3358 7.5 15.75C7.5 16.1642 7.83579 16.5 8.25 16.5H15.75C16.1642 16.5 16.5 16.1642 16.5 15.75C16.5 15.3358 16.1642 15 15.75 15H8.25Z" /> <path d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5Z" /> </> ); const SmilingFace = ( <path d="M12.0000002,1.99896738 C17.523704,1.99896738 22.0015507,6.47681407 22.0015507,12.0005179 C22.0015507,17.5242217 17.523704,22.0020684 12.0000002,22.0020684 C6.47629639,22.0020684 1.99844971,17.5242217 1.99844971,12.0005179 C1.99844971,6.47681407 6.47629639,1.99896738 12.0000002,1.99896738 Z M12.0000002,3.49896738 C7.30472352,3.49896738 3.49844971,7.30524119 3.49844971,12.0005179 C3.49844971,16.6957946 7.30472352,20.5020684 12.0000002,20.5020684 C16.6952769,20.5020684 20.5015507,16.6957946 20.5015507,12.0005179 C20.5015507,7.30524119 16.6952769,3.49896738 12.0000002,3.49896738 Z M8.46174078,14.7838355 C9.31087697,15.8615555 10.6018926,16.5020843 11.9999849,16.5020843 C13.396209,16.5020843 14.6856803,15.8632816 15.5349376,14.7880078 C15.7916692,14.4629512 16.2633016,14.4075628 16.5883582,14.6642944 C16.9134148,14.9210259 16.9688032,15.3926584 16.7120717,15.717715 C15.5813083,17.1494133 13.8601276,18.0020843 11.9999849,18.0020843 C10.1373487,18.0020843 8.41411759,17.1471146 7.28351576,15.7121597 C7.02716611,15.3868018 7.08310832,14.9152347 7.40846617,14.6588851 C7.73382403,14.4025354 8.20539113,14.4584777 8.46174078,14.7838355 Z M9.00044779,8.75115873 C9.69041108,8.75115873 10.2497368,9.3104845 10.2497368,10.0004478 C10.2497368,10.6904111 9.69041108,11.2497368 9.00044779,11.2497368 C8.3104845,11.2497368 7.75115873,10.6904111 7.75115873,10.0004478 C7.75115873,9.3104845 8.3104845,8.75115873 9.00044779,8.75115873 Z M15.0004478,8.75115873 C15.6904111,8.75115873 16.2497368,9.3104845 16.2497368,10.0004478 C16.2497368,10.6904111 15.6904111,11.2497368 15.0004478,11.2497368 C14.3104845,11.2497368 13.7511587,10.6904111 13.7511587,10.0004478 C13.7511587,9.3104845 14.3104845,8.75115873 15.0004478,8.75115873 Z" /> ); const HappyFace = ( <> <path d="M6.74927 12C6.53852 12 6.33749 12.0887 6.19539 12.2443C6.05329 12.4 5.98323 12.6082 6.00237 12.8181C6.28259 15.8916 8.55224 18.5 12 18.5C15.4478 18.5 17.7174 15.8916 17.9977 12.8181C18.0168 12.6082 17.9468 12.4 17.8047 12.2443C17.6626 12.0887 17.4616 12 17.2508 12H6.74927ZM12 17C9.74286 17 8.12852 15.5205 7.63237 13.5H16.3677C15.8715 15.5205 14.2571 17 12 17Z" /> <path d="M15.2501 8.75C14.8416 8.75 14.5398 9.03719 14.492 9.35982C14.4314 9.76957 14.05 10.0526 13.6403 9.99192C13.2305 9.93126 12.9475 9.54993 13.0082 9.14018C13.1696 8.0495 14.1313 7.25 15.2501 7.25C16.3689 7.25 17.3306 8.0495 17.492 9.14018C17.5527 9.54993 17.2697 9.93126 16.8599 9.99192C16.4502 10.0526 16.0688 9.76957 16.0082 9.35982C15.9604 9.03719 15.6586 8.75 15.2501 8.75Z" /> <path d="M7.99202 9.35982C8.03977 9.03719 8.34157 8.75 8.7501 8.75C9.15863 8.75 9.46043 9.03719 9.50818 9.35982C9.56884 9.76957 9.95017 10.0526 10.3599 9.99192C10.7697 9.93126 11.0527 9.54993 10.992 9.14018C10.8306 8.0495 9.86892 7.25 8.7501 7.25C7.63128 7.25 6.66963 8.0495 6.50818 9.14018C6.44753 9.54993 6.73053 9.93126 7.14028 9.99192C7.55003 10.0526 7.93136 9.76957 7.99202 9.35982Z" /> <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12Z" /> </> ); const customStyles = { itemShapes: [SadFace, NeutralFace, SmilingFace, HappyFace], activeFillColor: ['#da1600', '#dcb000', '#61bb00', '#009664'], inactiveFillColor: '#a8a8a8', }; function App() { const [rating, setRating] = useState(0); return ( <Rating style={{ maxWidth: 300 }} value={rating} onChange={setRating} itemStyles={customStyles} items={4} highlightOnlySelected spaceBetween="medium" transition="zoom" /> ); }Upvote / Downvote
const dAttr = `M13.915,0.379l8.258,9.98c0,0,1.252,1.184-0.106,1.184c-1.363,0-4.653,0-4.653,0s0,0.801,0,2.025 c0,3.514,0,9.9,0,12.498c0,0,0.184,0.709-0.885,0.709c-1.072,0-5.783,0-6.55,0c-0.765,0-0.749-0.592-0.749-0.592 c0-2.531,0-9.133,0-12.527c0-1.102,0-1.816,0-1.816s-2.637,0-4.297,0c-1.654,0-0.408-1.24-0.408-1.24s7.025-9.325,8.001-10.305 C13.24-0.414,13.915,0.379,13.915,0.379z`; // Source: https://www.svgrepo.com/svg/35304/up-arrow const ArrowUp = <path d={dAttr} />; const ArrowDown = <path transform="rotate(180 0 0)" d={dAttr} />; const customStyles = { itemShapes: [ArrowUp, ArrowDown], boxBorderWidth: 2, activeFillColor: ['#16A34A', '#E11D48'], activeBoxBorderColor: ['#16A34A', '#E11D48'], inactiveFillColor: '#9CA3AF', inactiveBoxBorderColor: '#9CA3AF', }; function App() { const [rating, setRating] = useState(0); return ( <div> <Rating style={{ maxWidth: 60 }} value={rating} onChange={setRating} itemStyles={customStyles} items={2} highlightOnlySelected radius="full" orientation="vertical" spaceBetween="medium" spaceInside="large" invisibleLabel="Upvote or downvote this post" invisibleItemLabels={['Upvote', 'Downvote']} /> <div>{rating === 1 && 'Upvoted'}</div> <div>{rating === 2 && 'Downvoted'}</div> </div> ); }Custom invisible labels
const CUSTOM_GROUP_LABEL = 'Rate GitHub Plaza Hotel'; const CUSTOM_LABELS = ['Bad', 'Poor', 'Average', 'Very Good', 'Excellent']; function App() { const [rating, setRating] = useState(0); return ( <Rating style={{ maxWidth: 200 }} value={rating} itemStyles={customStyles} onChange={(selectedValue) => setRating(selectedValue)} invisibleLabel={CUSTOM_GROUP_LABEL} invisibleItemLabels={CUSTOM_ITEM_LABELS} spaceBetween="small" spaceInside="medium" /> ); }Custom visible labels
const CUSTOM_GROUP_LABEL = 'Rate GitHub Plaza Hotel'; const CUSTOM_GROUP_LABEL_ID = 'group_label'; const CUSTOM_ITEM_LABELS = ['Bad', 'Poor', 'Average', 'Very Good', 'Excellent']; const CUSTOM_ITEM_LABELS_IDS = ['label_1', 'label_2', 'label_3', 'label_4', 'label_5']; function App() { const [rating, setRating] = useState(4); return ( <div role="group", style={{ maxWidth: 450, width: '100%' }}> <div id={CUSTOM_GROUP_LABEL_ID}>{CUSTOM_GROUP_LABEL}</div> <Rating value={rating} itemStyles={customStyles} onChange={setRating} visibleLabelId={CUSTOM_GROUP_LABEL_ID} visibleItemLabelIds={CUSTOM_ITEM_LABELS_IDS} spaceBetween="medium" spaceInside="medium" transition="colors" /> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', justifyItems: 'center', }} > {CUSTOM_ITEM_LABELS.map((label, index) => ( <span key={label} id={CUSTOM_ITEM_LABELS_IDS[index]} style={{ opacity: index + 1 === rating ? 1 : 0.35, textDecoration: index + 1 === rating ? 'underline' : 'inherit', padding: '0 5%', }} > {label} </span> ))} </div> </div> ); }Rate GitHub Plaza Hotel
BadPoorAverageVery GoodExcellent
Custom mixed labels
const CUSTOM_GROUP_LABEL = 'Rate GitHub Plaza Hotel'; const CUSTOM_GROUP_LABEL_ID = 'group_label'; const CUSTOM_ITEM_LABELS = ['Bad', 'Poor', 'Average', 'Very Good', 'Excellent']; function App() { const [rating, setRating] = useState(0); return ( <div role="group" style={{ maxWidth: 400, width: 100% }}> <div id={CUSTOM_GROUP_LABEL_ID}>{CUSTOM_GROUP_LABEL}</div> <Rating value={rating} itemStyles={customStyles} onChange={setRating} visibleLabelId={CUSTOM_GROUP_LABEL_ID} invisibleItemLabels={CUSTOM_ITEM_LABELS} spaceBetween="small" spaceInside="medium" transition="colors" /> </div> ); }Rate GitHub Plaza Hotel
Custom CSS
.custom-classname { gap: 5px; max-width: 200px; width: 100%; } .custom-classname .rr--svg { padding: 5px; border-width: 1px; border-style: solid; border-radius: 4px; } .custom-classname .rr--on .rr--svg { fill: MediumSeaGreen; background: MintCream; border-color: MediumSeaGreen; } .custom-classname .rr--off .rr--svg { fill: Tomato; background: AntiqueWhite; border-color: Tomato; } @media (min-width: 610px) { .custom-classname { max-width: 300px; gap: 10px; } .custom-classname .rr--svg { padding: 10px; border-width: 2px; border-radius: 10px; } } import { Star } from "react-rating-input"; import './custom-styles.css'; // 1. Omit the properties styled via CSS const customStyles = { itemShapes: Star; }; export function App() { return ( <Rating readOnly value={3} itemStyles={customStyles} className="custom-classname" // 2. Set to "none" any prop as well transition="none" spaceInside="none" radius="none" /> ); }Right to left
function App() { const [rating, setRating] = useState(2); return ( <div dir="rtl" style={{ maxWidth: 180, width: '100%' }}> <div> <Rating value={rating} onChange={setRating} /> {`Selected value: ${rating}`} </div> <Rating readOnly value={2.42} /> <Rating readOnly value={3.52} halfFillMode="box" itemStyles={customStyles} spaceBetween="small" /> </div> ); }Selected value: 2