Packages
react
components
WishlistButton

WishlistButton Component

The WishlistButton component renders a button for adding or removing a product from the user's wishlist. It must be a descendant of the WishlistProvider component.

Usage

import React from "react";
import { WishlistButton } from "@airsoko/react";
 
const MyComponent = () => {
  const product = {
    /* Product data here */
  };
 
  return <WishlistButton product={product}>Add to Wishlist</WishlistButton>;
};
 
export default MyComponent;

Props

NameTypeDescription
productProductThe product object for which the wishlist button is being rendered.
childrenReact.ReactNodeThe content to display inside the wishlist button.
loadingComponentReact.ReactNodeThe component to render while the wishlist button is in a loading state.
classNamestringThe CSS class name(s) to apply to the wishlist button container.
isWishlistNotAddedClassNamestringThe CSS class name(s) to apply to the wishlist button when the product has not been added to the wishlist.
isWishlistAddedClassNamestringThe CSS class name(s) to apply to the wishlist button when the product has been added to the wishlist.
quantitynumberThe current quantity on the list.

Notes

  • The WishlistButton component internally utilizes the useWishlist hook to handle wishlist functionality.
  • The button appearance changes based on whether the product is already in the wishlist or not.
  • You can customize the appearance of the button using the className, isWishlistNotAddedClassName, and isWishlistAddedClassName props.
  • The loadingComponent prop allows you to render custom content while the wishlist operation is in progress.