⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Experimental Exports - Hooks & Components

When overriding a native component or creating a new FastStore section, you can import the hooks and components from @faststore/core to customize specific functionalities without starting from scratch. Although some hooks are accessible through @faststore/sdk, certain functionalities, such as accessing cart and session data, require the use of hooks and components from @faststore/core.

⚠️

All exports are suffixed with _unstable to indicate that the support is experimental.


Usage

Import the hook or component into your component from @faststore/core/experimental:

import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental'

In the following example, the useCartToggleButton_unstable hook was imported to enhance the custom buy button with the ability to toggle the cart, and benefeting from the behavior of the useCartToggleButton.

import React from 'react'
import { Button as UIButton } from '@faststore/ui'
import { useCartToggleButton_unstable as useCartToggleButton } from '@faststore/core/experimental'
 
export default function CustomBuyButton() {
  const { onClick: toggleCart } = useCartToggleButton()
  return (
    <UIButton
      variant="primary"
      onClick={() => {
        toggleCart()
      }}
    >
      New Buy Button
    </UIButton>
  )
}

Available Exports

Explore the functionalities of the hooks and components, also find the up-to-date list of available experimental exports directly within the codebase: @faststore/core/experimental (opens in a new tab).

Hooks

Functions that provide a way to import some of the functionalities or state of native components to your custom components. The hooks provided by @faststore/core/experimental include:

  • useSession_unstable
  • sessionStore_unstable
  • validateSession_unstable
  • useCart_unstable
  • cartStore_unstable
  • useBuyButton_unstable
  • useCartToggleButton_unstable
  • useCheckoutButton_unstable
  • useRemoveButton_unstable
  • useQuery_unstable
  • useLazyQuery_unstable
  • useNewsletter_unstable
  • useDiscountPercent_unstable
  • useFormattedPrice_unstable
  • useLocalizedVariables_unstable
  • useProductGalleryQuery_unstable
  • useProductLink_unstable
  • useProductQuery_unstable
  • useProductsPrefetch_unstable
  • useSearchHistory_unstable
  • useSuggestions_unstable
  • useTopSearch_unstable
  • useFilter_unstable
  • useDelayedFacets_unstable
  • useDelayedPagination_unstable
  • getShippingSimulation_unstable
  • useShippingSimulation_unstable

Components

We highly recommend using the Image component when working with images in your application to enhance storefront performance. This component utilizes a service called Thumbor (opens in a new tab) for image resizing and cropping, with the results cached on a Content Delivery Network (CDN). Utilize it whenever an image is uploaded in the VTEX admin, whether in the CMS or Catalog.

import { HeroImage as UIHeroImage } from '@faststore/ui'
import { Image_unstable as Image } from '@faststore/core/experimental'
 
export default function CustomHeroImage() {
  return (
    <UIHeroImage>
      <Image
        src="https://storeframework.vtexassets.com/arquivos/ids/160965/est.jpg?v=637752924295370000"
        alt="Two puffs and two small desks placed together, accompanied by various color pencils."
        width={360}
        height={240}
        sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
      />
    </UIHeroImage>
  )
}