Like Button
A heart that fills with foil and bursts into small squares while its count pops up. Taking it back is quiet.
Usage
import { LikeButton } from '@wdzyi/ui';
<LikeButton
count={post.likes}
liked={post.liked}
onChange={setLiked}
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- countnumber
- The number of likes, counting this one if it’s liked.
- liked, defaultLikedboolean
- Liked, when you hold the state, or where it starts when it holds its own.
- onChange(liked: boolean) => void
- Called with the new state.
- labelstring = 'Like'
- Names the button. The count is added to it.
- size'md' | 'lg' = 'md'
- A heart of 18 or 26px, with the count to match.
Notes
- Ten squares leave the heart’s edge, foil and ink, near and far, each turning its own way, and each burst is turned a little from the last.
- The count’s digits are Number Pop’s, so 199 to 200 flips all three. Taking the like back steps it down without the flip.
- Hovering only brings the heart and the count up to full ink over 150ms. There’s no plate, and nothing moves until it’s pressed.
- It’s a toggle button, so a screen reader hears its label, the count, and whether it’s pressed. It sends pop when it’s liked, and nothing when the like is taken back.
- With reduced motion, the heart fills and empties without the burst.