> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Use a Wix Context in an Editor React Component in Studio Two

## Article: Use a Wix Context in an Editor React Component in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/use-a-wix-context-in-an-editor-react-component-in-studio-two.md

## Article Content:

# Use a Wix Context in an Editor React Component in Studio Two

An [Editor React Component (ERC)](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components.md) can use a Wix business solution context by calling the context's React hook in its own code. A Wix business solution context is a context that a Wix business solution provides, such as the Stores Product Context. It holds the business solution's current values, such as a product's price and stock, and functions for actions, such as adding the selected product to the cart.

A business solution provides its context on some of its own pages, for each item in some of its lists, and through Data Sources. In the Studio Two editor, a Data Source is what a Wix user attaches to a page, container, or section to give the elements inside it access to a context. When a Wix user places your ERC inside one of these areas, the ERC's code can read that context's values without the Wix user binding the data in the editor. To compare this approach with editor binding, see [Component Integration Patterns](https://dev.wix.com/docs/studio-two/code-your-site/code-model/component-integration-patterns.md#use-a-wix-context-in-an-ercs-code).

Follow the instructions below to:

1. Choose a context.
2. Use the context in your component.
3. Declare the context in the manifest.
4. Check the component in the editor.
5. Publish your site and check it.

## Before you begin

Make sure that:

- The Wix business solution that provides the context is installed on your site. For the example, install Wix Stores and add at least 1 product.
- Your site project's `package.json` lists the business solution's package, such as `@wix/stores`. If it doesn't, install the package. For instructions, see [Work with npm Packages](https://dev.wix.com/docs/studio-two/code-your-site/developer-environment/packages/work-with-npm-packages.md).
- You have an ERC in your site project. To add one, see [Add an Editor React Component Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/add-an-editor-react-component-extension-in-studio-two.md).

## Step 1 | Choose a context

In [Wix Business Solution Contexts](https://dev.wix.com/docs/contexts.md), find the context that holds the values your component needs. Each context's introduction lists:

- Where the context is available: the pages, Data Sources, and list items that provide it. Your ERC can read the context only when a Wix user places it in one of these.
- The context's hook and the path to import it from, in its **Usage** section.
- How the context behaves in the editor, such as sample values it shows before a Wix user chooses an item.

Each context's reference pages document the properties and functions the hook returns.

For the example, use the [Product Context](https://dev.wix.com/docs/contexts/contexts/stores/product/introduction.md). Its hook is `useProductContext()`, imported from `@wix/stores/context/product`. It's available on a product page, under the **Product** Data Source, and in each **Product Item** of a **Product List**.

## Step 2 | Use the context in your component

To use the context:

1. In the **Code** tab, open your ERC's `<component-folder>.tsx` file under `src/extensions/site/components/<component-folder>/`.
2. Import the context's hook from the path in its **Usage** section.
3. Call the hook at the top level of your component, and destructure the properties and functions you need.
4. Use the values in your JSX, and call the functions from event handlers.
5. Save the file.

When a value in the context changes, the hook returns the new value and your component renders again. For example, the Product Context's `pricing` changes when a site visitor selects a different option.

The following component shows the price of the site visitor's current selection and an **Add to Cart** button:

```tsx
import { useProductContext } from '@wix/stores/context/product';
import styles from './product-price.module.css';
import type { ProductPriceProps } from './product-price.props';

export default function ProductPrice({ id, className }: ProductPriceProps) {
  const { pricing, isInStock, addToCartState, handleAddToCart } = useProductContext();

  return (
    <div id={id} className={`product-price ${className} ${styles.root}`}>
      <span className={`product-price-amount ${styles.amount}`}>
        {pricing.currentSellingPrice?.formattedAmount}
      </span>
      <button
        className={`product-price-button ${styles.button}`}
        disabled={!isInStock || addToCartState === 'in-progress'}
        onClick={() => handleAddToCart()}
      >
        {isInStock ? 'Add to Cart' : 'Out of Stock'}
      </button>
    </div>
  );
}
```

The component still follows the rules for every ERC, such as passing `id` and `className` to its root element. For those rules, see [Build an Editor React Component in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/build-an-editor-react-component-in-studio-two.md).

## Step 3 | Declare the context in the manifest

Declare each context your component uses in its manifest, so the site loads the context for your component. Importing the hook doesn't add the declaration for you.

To declare the context:

1. Open `<component-folder>.extension.ts`.
2. In both `resources.client` and `resources.editor`, add a `dependencies` object with a `contextDependencies` array. `resources.client` covers the live site, and `resources.editor` covers the editor.
3. Add the hook's import path to the array, for example `'@wix/stores/context/product'`.
4. Save the file.
5. Refresh the editor's browser tab, so the editor loads the updated manifest.

For example, to declare the Product Context:

```ts
resources: {
  client: {
    componentUrl,
    dependencies: {
      contextDependencies: ['@wix/stores/context/product'],
    },
  },
  editor: {
    componentUrl: componentPreviewUrl,
    dependencies: {
      contextDependencies: ['@wix/stores/context/product'],
    },
  },
},
```

For the other fields in `resources`, see [About the Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md).

## Step 4 | Check the component in the editor

Place the ERC where the context is available, and check that it shows the context's values.

To check the component:

1. Switch to the **Design** tab.
2. Go to an area that provides the context:
   - **A business solution page:** Open the page, such as a product page.
   - **A Data Source:** Attach the Data Source to a page, container, or section:
     1. In the **Layers** panel, select the page, container, or section, then choose **More Actions > Connect to Data**.
     2. Click **Connect Source**, then choose the Data Source under its business solution's name, such as **Wix Stores > Product**.
     3. In the floating toolbar, click **Manage** followed by the Data Source's name, such as **Manage Product**. Then, in **Data Settings**, choose the item the Data Source provides, such as a product in **Select a product**.

     For more about working with Data Sources in the editor, see [Build a Data Source in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/build-a-data-source-in-studio-two.md#step-5--check-the-data-source). To work in the **Layers** panel, see [Studio Two Editor: Working with Layers](https://support.wix.com/en/article/studio-two-editor-working-with-layers). For **Connect Source**, see [Connect to Source](https://support.wix.com/en/article/connect-to-source).
3. Ask **Aria**, Wix's AI assistant, to place your component inside that area. For how to work with Aria, see [Working with Aria](https://support.wix.com/en/article/wix-studio-20-working-with-aria).
4. Check that the component shows the context's values. On the canvas, some contexts fill properties the item leaves empty with sample values. The context's introduction in the [Wix Business Solution Contexts](https://dev.wix.com/docs/contexts.md) reference describes its behavior in the editor.
5. Click **Preview**, and check that the component shows real values and that its functions work.

For the example, open the product page and choose a product in the product selector at the top of the canvas. Then ask Aria to place the price display on the page, and check that it shows the price of the product you chose. In **Preview**, check that clicking **Add to Cart** adds the product to the cart.

If the component shows placeholder content instead of the context's values, check `component.preview.tsx`. The editor loads this file on the canvas and in **Preview**, and it should render your component. You can ask Aria to update it. For what the file does, see [Editor React Component Extension Files and Code](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-component-extension-files-and-code.md).

<blockquote class="tip">

**Tip:** If the editor shows an error instead of your component, the ERC isn't inside a page, Data Source, or list item that provides the context, so the context's hook throws. Move the ERC into an area that provides the context, or attach the Data Source to the page, container, or section that contains the ERC.

</blockquote>

## Step 5 | Publish your site and check it

When you're ready, click **Publish** in the Studio Two editor. Your ERC ships with the published site and reads the context wherever it's placed inside a page, Data Source, or list item that provides it.

On the live site, check that the component works the same way it did in **Preview**.


## See also

- [Wix Business Solution Contexts](https://dev.wix.com/docs/contexts.md)
- [Component Integration Patterns](https://dev.wix.com/docs/studio-two/code-your-site/code-model/component-integration-patterns.md)
- [About Editor React Components](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components.md)
- [Build an Editor React Component in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/build-an-editor-react-component-in-studio-two.md)
- [About Data Sources](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/about-data-sources.md)