diff --git a/docs/localization/experimental-exports-hooks-and-components.md b/docs/localization/experimental-exports-hooks-and-components.md index 45c12c5ce0..e63a66d132 100644 --- a/docs/localization/experimental-exports-hooks-and-components.md +++ b/docs/localization/experimental-exports-hooks-and-components.md @@ -1,96 +1,98 @@ --- -title: "Experimental exports - Hooks and Components" -slug: "experimental-exports-hooks-and-components" +title: Experimental exports - Hooks and Components +slug: experimental-exports-hooks-and-components hidden: false -createdAt: "2024-09-17T17:30:15.623Z" +createdAt: 2024-09-17T17:30:15.623Z updatedAt: "" --- -FastStore provides [hooks](#list-of-hooks-and-components) and components to extend native functionalities within your [custom sections](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) and [overridden components](https://developers.vtex.com/docs/guides/faststore/overrides-overview). +FastStore provides [hooks](#list-of-hooks-and-components) and components to extend native features within your [custom sections](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) and [overridden components](https://developers.vtex.com/docs/guides/faststore/overrides-overview). -For example, you can create a custom [BuyButton](https://developers.vtex.com/docs/guides/faststore/molecules-buy-button) that not only adds products to the cart but also displays a personalized message based on user preferences or purchase history. +For example, you can create a custom [BuyButton](https://developers.vtex.com/docs/guides/faststore/molecules-buy-button) 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](#list-of-hooks-and-components) are suffixed with `_unstable`, indicating that they are subject to change and may not be stable for production use.. +All experimental [hooks and components](#list-of-hooks-and-components) are suffixed with `_unstable`, indicating that they are subject to change and may not be stable for use in production. ## Instructions -1. Open your store project in a code editor and open the component or section file you want to import the hook or component. +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. Declare the hook or component into your custom component file. - ```tsx - import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental' - ``` - -3. Incorporate the imported hook or component into your custom component logic. In the following example, the `useCartToggleButton_unstable` hook was used to allow toggling the cart. - - ```tsx mark=3 - 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 ( - { - toggleCart() - }} - > - New Buy Button - - ) - } - ``` + ```tsx + import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental' + ``` + +3. Incorporate the imported hook or component into your custom component logic. In the following example, the `useCartToggleButton_unstable` hook enables toggling the cart. + + ```tsx mark=3 + 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 ( + { + toggleCart() + }} + > + New Buy Button + + ) + } + ``` 4. Save your changes. -5. Open a terminal and run `yarn dev`. test the implementation. + +5. Open a terminal and run `yarn dev` to test the implementation. ## List of hooks and components -Explore the functionalities of the experimental hooks and the `Image_unstable` component available. +Explore the features of the experimental hooks and the `Image_unstable` component. - [Hooks](#hooks) - [`Image_unstable` component](#image_unstable-component) ### Hooks -Hooks provide functionalities or states 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's session.| -|`useCart_unstable`|Accesses the current cart's state and actions.| -|`cartStore_unstable`|Stores and retrieves cart data.| -|`useBuyButton_unstable`|Leverages the behavior of the native [BuyButton](https://developers.vtex.com/docs/guides/faststore/molecules-buy-button).| -|`useCartToggleButton_unstable`|Adds a cart toggle functionality to your custom components.| -|`useCheckoutButton_unstable`|Leverages the behavior of the native checkout button.| -|`useRemoveButton_unstable`|Leverages the behavior of the native remove button.| -|`useQuery_unstable`|Fetches data from a GraphQL endpoint.| -|`useLazyQuery_unstable`|Fetches data from a GraphQL endpoint on demand.| -|`useNewsletter_unstable`|Accesses the newsletter subscription functionality.| -|`useDiscountPercent_unstable`|Calculates the discount percentage for a given price.| -|`useFormattedPrice_unstable`|Formats a price value according to the current locale.| -|`useLocalizedVariables_unstable`|Provides localized variables for use in your components.| -|`useProductGalleryQuery_unstable`|Fetches product gallery images.| -|`useProductLink_unstable`|Generates a product link based on the product ID.| -|`useProductQuery_unstable`|Fetches product data.| -|`useProductsPrefetch_unstable`|Prefetches product data 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 functionality for product listings.| -|`useDelayedFacets_unstable`|Delays the application of facets 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.| +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](https://developers.vtex.com/docs/guides/faststore/molecules-buy-button). | +| `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`](https://github.com/vtex/faststore/blob/105a8b2f69ffd8438532d7c9eb959ed26a567675/packages/core/src/components/ui/Image/Image.tsx) component to optimize image performance on your storefront. This component uses [Thumbor](https://www.thumbor.org/) for image resizing and cropping, and caches the results on a Content Delivery Network (CDN). Use it whenever you need to [create a new section for the Headless CMS](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section). +Use the [`Image_unstable`](https://github.com/vtex/faststore/blob/105a8b2f69ffd8438532d7c9eb959ed26a567675/packages/core/src/components/ui/Image/Image.tsx) component to optimize image performance on your storefront. This component uses [Thumbor](https://www.thumbor.org/) 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](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section). ```tsx mark=2 import { HeroImage as UIHeroImage } from '@faststore/ui'