Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development

Experimental exports - Hooks and Components

FastStore provides hooks and components to extend native features within your custom sections and overridden components.
For example, you can create a custom BuyButton that adds products to the cart and displays a personalized message based on user preferences or order history.

Before you begin

All experimental hooks and components are suffixed with _unstable, indicating they are available for use but may not function as expected or could have limitations with certain store customizations. Before deploying them in a production environment, make sure to test them to confirm compatibility with your store.

Instructions

  1. Open your store project in a code editor, then open the component or section file where you want to import the hook or component.
  2. Import the hook or component into your custom component file.

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

    Replace {ComponentName} with the name of the component you want to import, for example useCartToggleButton.
  3. Incorporate the imported hook or component into your custom component logic. In the following example, the useCartToggleButton_unstable hook enables toggling the cart.

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

  4. Save your changes.
  5. Open a terminal and run yarn dev to test the implementation.

List of hooks and components

Explore the features of the experimental hooks and the Image_unstable component.

Hooks

Hooks provide features or statuses of native components that you can integrate into your custom components. Here's a list of available hooks:

Authentication

HookDescription
useAuth_unstableAccesses authentication status and actions.

Cart

HookDescription
cartStore_unstableStores and retrieves cart details.
useCart_unstableAccesses the current cart's status and actions.
useBuyButton_unstableLeverages the behavior of the native BuyButton.
useCartToggleButton_unstableAdds a cart toggle feature to custom components.
useCheckoutButton_unstableLeverages the behavior of the native checkout button.
useRemoveButton_unstableLeverages the behavior of the native remove button.

Delivery Promise

HookDescription
deliveryPromiseStore_unstableStores and retrieves Delivery Promise data (pickup points, default/global selection, simulation state).
useDeliveryPromise_unstableAccesses and manages Delivery Promise state, pickup points, delivery-related facets, labels, and badges.

GraphQL

HookDescription
useLazyQuery_unstableRetrieves data from a GraphQL endpoint on demand.
useQuery_unstableRetrieves data from a GraphQL endpoint.

Newsletter

HookDescription
useNewsletter_unstableAccesses the newsletter subscription feature.

Product

HookDescription
useDiscountPercent_unstableCalculates the discount percentage for a given price.
useFormattedPrice_unstableFormats a price value based on the current locale.
useLocalizedVariables_unstableProvides localized variables for use in components.
useCreateUseGalleryPage_unstableHandles the creation of a gallery page.
useGalleryPage_unstableManages the state and functionality of a gallery page.
UseGalleryPageContext_unstableProvides access to and management of the context for a gallery page.
useProductGalleryQuery_unstableRetrieves product gallery images.
useProductLink_unstableGenerates a product link based on the product ID.
useProductQuery_unstableRetrieves product details.
useProductsPrefetch_unstablePreloads product details for a given list of product IDs.

Search

HookDescription
useDelayedFacets_unstableDelays facet application to improve performance.
useDelayedPagination_unstableDelays pagination to improve performance.
useFilter_unstableEnables filtering for product listings.
useSearchHistory_unstableAccesses the user's search history.
useSuggestions_unstableProvides suggestions based on the user's search query.
useTopSearch_unstableRetrieves the top search results.

Session

HookDescription
sessionStore_unstableStores and retrieves session data.
useSession_unstableAccesses and manages current session information.
validateSession_unstableValidates the current user session.

Shipping

HookDescription
getShippingSimulation_unstableRetrieves the shipping simulation data, which can be used to display shipping costs, options, and delivery estimates.
useShippingSimulation_unstableRuns and manages shipping simulations to display costs, options, and delivery estimates.

UI

HookDescription
useScreenResize_unstableAdapts the interface to different screen sizes and devices.

Image_unstable component

Use the Image_unstable component to optimize image performance in your storefront. This component uses Thumbor for image resizing, cropping, and caching the results on a Content Delivery Network (CDN). Use it whenever you need to create a new section for the Headless CMS.

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

Contributors
1
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
Was this helpful?
Suggest edits (GitHub)
On this page