Skip to component
GGamma

Pulse Heart

A like button that contracts, flips, and rebounds while its count ticks over.

New
Field notes
Not saved to the field notes list
Live previewUse keyboard to interact

Implementation

1"use client";2 3import { useEffect, useState, type ButtonHTMLAttributes } from "react";4import { Heart } from "lucide-react";5 6export type PulseHeartProps = Omit<7  ButtonHTMLAttributes<HTMLButtonElement>,8  "children" | "onChange"9> & {10  /** Controlled liked state. */11  liked?: boolean;12  /** Initial liked state when uncontrolled. */13  defaultLiked?: boolean;14  /** Controlled count. */15  count?: number;16  /** Initial count when uncontrolled. */17  defaultCount?: number;18  /** Called on every press with the new state and count. */19  onLikeChange?: (liked: boolean, count: number) => void;20  /** Accessible name; the count is appended. */21  label?: string;22  /** Show the count beside the glyph. */23  showCount?: boolean;24  disabled?: boolean;25  className?: string;26};27 28const normalizeCount = (value: number) =>