WishlistButton

Heart-icon toggle with optimistic state + revert-on-error.

components/wishlist-button.tsxPeer deps: lucide-react

Live preview

Click the heart

Usage

import { WishlistButton } from "@/components/wishlist-button";

<WishlistButton
  isWishlisted={isWishlisted}
  onToggle={async (next) => {
    await fetch(`/api/wishlist/${product.id}`, {
      method: next ? "POST" : "DELETE",
    });
    refetchWishlist();
  }}
/>