Rating Breakdown Reviews Block for React

Edit TALLY (how many reviews gave each star rating), RECOMMENDED (how many would recommend the product) and REVIEWS (the reviews to show) at the top of the file. Everything else is worked out from them when the module loads: the total, the average to one decimal (by whole-number maths, so 5,641 stars over 1,284 reviews is exactly 4.4), the stars drawn for it to the nearest half, the share that would recommend it, and each row's percentage by the largest remainder method, so the five rows always add up to 100.

The reviews listed at the end, not the counts. The summary always describes every review; the list holds a sample (here, the four most helpful), and a row narrows that sample to one rating. Press the row again, or Clear, to see all four; the line under the rows says what is showing and is read out politely. When none of the shown reviews has that rating, an empty state says how many reviewers gave it, with a button that shows the four again and puts focus back on the row you pressed. An unseen copy of the full list holds the height, so filtering never moves the page below.

No. It's local state: pressing Helpful adds one to that review's count and says "You marked this helpful", and pressing it again takes the vote back, so a visitor counts once. Nothing is sent and a reload starts afresh. To keep votes, send the review's id to your own endpoint from the handler and seed helpful from your data.

They're the catalog Rating, read-only, inside an inert, aria-hidden wrapper: they only draw the value, and the words next to them say it ("4 out of 5", or the average with "out of 5 on average"). Rating draws in your warning colour by default; here it takes text-foreground, and the average uses half stars. The Rating is built on Ark UI on every target, so it renders the same everywhere.

Yes. The rows follow the page's direction: the star at the start, the bar filling from the start, then the count and the percentage, each figure isolated so its digits and sign stay in order. A half star is mirrored so it fills from the start too, and dates are fixed time elements with the machine-readable date.

It's a link (href="#"): point it at your review form. It's a Shine Button, the section's one primary control. It renders the link it's given with render, with nativeButton={false}.