Tag Cloud Reviews Block for React

Replace REVIEWS and WORDS at the top of the file. The mention counts, the four size steps, the list for each word and the line under the heading are all worked out from the review text when the module loads: a word counts wherever it appears as a whole word, ignoring case and punctuation. Pick words that appear at least twice, or the cloud shows an almost empty list.

Each word's count is placed between the least and the most mentioned word and mapped to one of four type sizes, so the cloud always spans the full range whatever your data. The size is only a hint: each button's accessible name says the count ("sweet, 7 mentions"), and the live line says it again in words when you choose one.

One line per mention, not per review, so a review that says the word twice gives two lines. Each shows up to four words before the mention and five after, cut at the review's own ends, with an ellipsis where more text follows. From the small breakpoint the mention sits at the centre of a three-column line; below that the same words wrap as a sentence with the mention marked. Lines are shown in English, so they keep their own direction in a right-to-left page.

An unseen copy of the list for the most-mentioned word sits in the same grid cell as the live list, so the cell is always as tall as the longest one. The figure never changes size, because a chosen word only changes colour.

Tab into the cloud, move between words with the arrow keys and press Space or Enter to choose one; the list and the count change at once and the count is read out politely. One word is always chosen, so there is no empty state.

Yes. The two parts swap sides, the cloud and the heading follow the page's direction, stars are mirrored so they fill from the start, and counts and dates are isolated so their digits keep their order. The context lines are left to right on purpose, like code, because they quote English text.