An up and down vote pair with a rolling score, one active vote at a time and optimistic updates that roll back when onVote rejects.
Idea / tomas.v / 3d ago
Bulk-edit labels from the table view
Select a few rows, rename or merge their labels in one pass.
npx shadcn@latest add https://hyperblur.dev/r/vote-arrows.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/vote-arrows.tsx.
import { VoteArrows } from "@/components/hyperblur/vote-arrows"
<VoteArrows score={128} onVote={(vote, score) => console.log(vote, score)} />| Prop | Type | Default | Description |
|---|---|---|---|
| score | number | 0 | Total score at the initial vote. A vote moves it by the difference from that initial vote. |
| value | -1 | 0 | 1 | Controlled vote. Pair with onVote. | |
| defaultValue | -1 | 0 | 1 | 0 | Initial vote when uncontrolled. |
| onVote | (value: Vote, score: number) => void | Promise<unknown> | Called with the new vote and score. When it returns a promise that rejects, the vote rolls back and the score shakes. | |
| orientation | "vertical" | "horizontal" | "vertical" | Stack the arrows in a column or place them in a row. |
| upColor | string | "#ff6a3d" | Color of the upvote arrow and of the score while upvoted. |
| downColor | string | "#7b8cff" | Color of the downvote arrow and of the score while downvoted. |
| label | string | "Vote" | Accessible name of the group. |