RecentlyViewed

Tracker + renderer pair using localStorage. Shows products the buyer recently saw.

components/recently-viewed.tsxPeer deps: lucide-react

Live preview

Demo seeds localStorage with 4 product IDs and returns canned data from onFetch. In a real integration you'd fetch by id from your DB / API.

Loading…

Usage

// On every PDP — logs the product id to localStorage
import { RecentlyViewedTracker } from "@/components/recently-viewed";
<RecentlyViewedTracker productId={product.id} />

// On the cart page or homepage — renders the list
import { RecentlyViewed } from "@/components/recently-viewed";
<RecentlyViewed
  onFetch={async (ids) => {
    const res = await fetch(`/api/products/by-ids?ids=${ids.join(",")}`);
    const data = await res.json();
    return data.products;
  }}
/>