Skip to content

Commit

Permalink
Fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeorgeLimaDev
GeorgeLimaDev committed Oct 18, 2024
1 parent 5a128e6 commit 52d7139
Showing 1 changed file with 53 additions and 55 deletions.
108 changes: 53 additions & 55 deletions docs/localization/experimental-exports-hooks-and-components.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
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: ""
---

Expand All @@ -17,37 +17,35 @@ All experimental [hooks and components](#list-of-hooks-and-components) are suffi
## 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. Declare the hook or component into your custom component file.

```tsx
import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental'
```
```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>
)
}
```
```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` to test the implementation.

## List of hooks and components
Expand All @@ -61,34 +59,34 @@ Explore the features of the experimental hooks and the `Image_unstable` componen

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. |
|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

Expand Down

0 comments on commit 52d7139

Please sign in to comment.