Customization

Styling approach

The SDK ships with zero built-in CSS. All components accept className and style props. Use your existing styling solution (Tailwind, CSS Modules, styled-components, etc.).

// Tailwind
<WishlistButton
  productId="123"
  className="p-2 rounded-full hover:bg-red-50 transition-colors"
/>

// CSS Modules
<WishlistButton
  productId="123"
  className={styles.wishlistButton}
/>

// Inline styles
<WishlistButton
  productId="123"
  style={{ padding: 8, borderRadius: "50%" }}
/>

Render props

Every component supports a children render prop that gives you full control over the rendered output:

<WishlistButton productId="123">
  {({ wishlisted, toggle, loading }) => (
    <motion.button
      onClick={toggle}
      animate={{ scale: wishlisted ? 1.2 : 1 }}
    >
      <HeartIcon filled={wishlisted} />
    </motion.button>
  )}
</WishlistButton>

Building custom components with hooks

For maximum flexibility, use the hooks directly:

import { useWishlist, useWishlistActions, useIsWishlisted } from "@simplersuite/wishlist-react";

function CustomWishlistPage() {
  const { items, loading, count } = useWishlist();
  const { removeItem, bulkRemove } = useWishlistActions();
  const [selected, setSelected] = useState<string[]>([]);

  if (loading) return <Skeleton />;

  return (
    <div>
      <header>
        <h1>{count} saved items</h1>
        {selected.length > 0 && (
          <button onClick={() => bulkRemove(selected)}>
            Remove {selected.length} items
          </button>
        )}
      </header>

      {items.map((item) => (
        <CustomProductCard
          key={item.productId}
          item={item}
          selected={selected.includes(item.productId)}
          onSelect={() => setSelected((s) =>
            s.includes(item.productId)
              ? s.filter((id) => id !== item.productId)
              : [...s, item.productId]
          )}
          onRemove={() => removeItem(item.productId)}
        />
      ))}
    </div>
  );
}

Using the client without React

The WishlistClient class has no React dependency and can be used in any JavaScript environment:

import { WishlistClient } from "@simplersuite/wishlist-react";

const client = new WishlistClient({
  apiBase: "https://your-api.example.com",
  token: customerJwt,
});

const { items } = await client.getWishlist();
await client.addItem("product_123");
await client.removeItem("product_123");