Skip to content

Commit

Permalink
New translations experimental-exports-hooks-and-components.md (Englis…
Browse files Browse the repository at this point in the history 
…h, United States)
  • Loading branch information
@GeorgeLimaDev
GeorgeLimaDev committed Oct 18, 2024
1 parent 1501168 commit 5a128e6
Showing 1 changed file with 67 additions and 65 deletions.
132 changes: 67 additions & 65 deletions docs/localization/experimental-exports-hooks-and-components.md
View file
Original file line number Diff line number Diff line change
@@ -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 (
<UIButton
variant="primary"
onClick={() => {
toggleCart()
}}
>
New Buy Button
</UIButton>
)
}
```
```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 (
<UIButton
variant="primary"
onClick={() => {
toggleCart()
}}
>
New Buy Button
</UIButton>
)
}
```

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'
Expand Down

0 comments on commit 5a128e6

Please sign in to comment.