Skip to content

Commit

Permalink
Merge pull request #1496 from vtexdocs/l10n_EDU-11369-experimental-ex…
Browse files Browse the repository at this point in the history
…ports

Doc reviewed by Localization
  • Loading branch information
mariana-caetano authored Oct 18, 2024
2 parents 1501168 + 52d7139 commit 75e4371
Showing 1 changed file with 23 additions and 23 deletions.
46 changes: 23 additions & 23 deletions docs/localization/experimental-exports-hooks-and-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,24 @@ 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.
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'
Expand All @@ -46,51 +46,51 @@ All experimental [hooks and components](#list-of-hooks-and-components) are suffi
```

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:
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's session.|
|`useCart_unstable`|Accesses the current cart's state and actions.|
|`cartStore_unstable`|Stores and retrieves cart 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 functionality to your custom components.|
|`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`|Fetches data from a GraphQL endpoint.|
|`useLazyQuery_unstable`|Fetches data from a GraphQL endpoint on demand.|
|`useNewsletter_unstable`|Accesses the newsletter subscription functionality.|
|`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 according to the current locale.|
|`useLocalizedVariables_unstable`|Provides localized variables for use in your components.|
|`useProductGalleryQuery_unstable`|Fetches product gallery images.|
|`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`|Fetches product data.|
|`useProductsPrefetch_unstable`|Prefetches product data for a given list of product IDs.|
|`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 functionality for product listings.|
|`useDelayedFacets_unstable`|Delays the application of facets to improve performance.|
|`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'
Expand Down

0 comments on commit 75e4371

Please sign in to comment.