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 that they are subject to change and may not be stable for use in production.Instructions
-
Open your store project in a code editor, then open the component or section file where you want to import the hook or component.
-
Import the hook or component into your custom component file._10import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental'Change the
{ComponentName}to the name of the component you want to import, for exampleuseCartToggleButton. -
Incorporate the imported hook or component into your custom component logic. In the following example, the
useCartToggleButton_unstablehook enables toggling the cart._17import React from 'react'_17import { Button as UIButton } from '@faststore/ui'_17import { useCartToggleButton_unstable as useCartToggleButton } from '@faststore/core/experimental'_17_17export default function CustomBuyButton() {_17const { onClick: toggleCart } = useCartToggleButton()_17return (_17<UIButton_17variant="primary"_17onClick={() => {_17toggleCart()_17}}_17>_17New Buy Button_17</UIButton>_17)_17} -
Save your changes.
-
Open a terminal and run
yarn devto 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 from native components that you can integrate into your custom components. Here's a list of available hooks:
| Hook | Description |
|---|---|
useSession_unstable | Accesses and manages current session information. |
sessionStore_unstable | Stores and retrieves session data. |
validateSession_unstable | Validates the current user session. |
useCart_unstable | Accesses the current cart's status and actions. |
cartStore_unstable | Stores and retrieves cart details. |
useBuyButton_unstable | Leverages the behavior of the native BuyButton. |
useCartToggleButton_unstable | Adds a cart toggle feature to custom components. |
useCheckoutButton_unstable | Leverages the behavior of the native checkout button. |
useRemoveButton_unstable | Leverages the behavior of the native remove button. |
useQuery_unstable | Retrieves data from a GraphQL endpoint. |
useLazyQuery_unstable | Retrieves data from a GraphQL endpoint on demand. |
useNewsletter_unstable | Accesses the newsletter subscription feature. |
useDiscountPercent_unstable | Calculates the discount percentage for a given price. |
useFormattedPrice_unstable | Formats a price value based on the current locale. |
useLocalizedVariables_unstable | Provides localized variables for use in components. |
useProductGalleryQuery_unstable | Retrieves product gallery images. |
useProductLink_unstable | Generates a product link based on the product ID. |
useProductQuery_unstable | Retrieves product details. |
useProductsPrefetch_unstable | Preloads product details for a given list of product IDs. |
useSearchHistory_unstable | Accesses the user's search history. |
useSuggestions_unstable | Provides suggestions based on the user's search query. |
useTopSearch_unstable | Retrieves the top search results. |
useFilter_unstable | Enables filtering for product listings. |
useDelayedFacets_unstable | Delays facet application to improve performance. |
useDelayedPagination_unstable | Delays pagination to improve performance. |
getShippingSimulation_unstable | Retrieves the shipping simulation data, which can be used to display shipping costs, options, and delivery estimates. |
Image_unstable component
Use the
Image_unstable component to optimize image performance on your storefront. This component uses Thumbor for image resizing and cropping, caching the results on a Content Delivery Network (CDN). Use it whenever you need to create a new section for the Headless CMS.
_16import { HeroImage as UIHeroImage } from '@faststore/ui'_16import { Image_unstable as Image } from '@faststore/core/experimental'_16_16export 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}