shadcn.io is not affiliated with official shadcn/ui
Reaction Notification Comments Block for React Aria
A batching policy preview: fourteen typed reactions to one comment become 14, 3 or 1 alerts under Every reaction, Batch or Daily digest, with a batch size you can change.
Installation
Overview
Show how many alerts a burst of reactions would cause, with this policy preview for React with React Aria. A compact header and one frame: the comment that got the reactions, a band with a Segment Group for the policy (Every reaction, Batch, Daily digest) and, for Batch, a stepper that reads "Batch after 3 reactions within 30 minutes", a strip with the alert count each policy would make, and a held list of the alerts themselves. A plain function groups the fourteen typed reaction times: with Batch, reactions within 30 minutes of the first join one alert when there are at least as many as the batch size, and stay single alerts when there are fewer. Each alert reads like "Wilmer, Sorrel and 3 others reacted, 06:24". The list scrolls in a fixed height, so changing the policy never moves the page. For appreciation feeds, comment threads and any product that has to decide when a burst becomes a notification.
FAQ
How do I fill it with my own reactions?
Edit BURST: each reaction has an id, a kind, the minutes after midnight m it arrived and who sent it, in the order they arrived. WINDOW_MINUTES is the batching window, LEAST and MOST bound the stepper, and DIGEST_AT is when the digest arrives. The three totals and the list are worked out from those.
How does Batch decide?
It starts a window at the first reaction that is not yet grouped and collects every reaction within 30 minutes of it. If the window holds at least the batch size, you get one alert named for the last reaction; if not, each reaction is its own alert. Raise the size and some groups fall back to single alerts.
What does Daily digest do?
It makes one alert at a fixed time the next morning that names everyone who reacted. The time is typed text here; in a real product it comes from the person's settings.
What stays local?
The policy and the batch size. The status line names each result and nothing is sent. To make it real, run the same grouping on the server when reactions arrive, keep one pending window per comment and person, and send when it closes.
Is it accessible?
The policy is a labelled segmented control, the stepper buttons are named "Batch after fewer reactions" and "Batch after more reactions" and refuse quietly at their limits, and the strip says which policy is chosen in words. The alert list is a focusable region that scrolls with the keyboard.