> 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: Introduction

## Article: Introduction

## Article Link: https://dev.wix.com/docs/sdk/host-modules/dashboard-react-deprecated/introduction.md

## Article Content:

# Dashboard React SDK

<blockquote class="caution">
  <strong>Deprecated</strong>
  
  This module is deprecated. For more information, see <a href="portalId::b85dea5b-341b-493b-b99e-4d4ca12baaa2resourceId::b5088d52-82f9-44cc-b1a2-fea83606d85d*fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard-react/migrating-from-dashboard-react">Migrating.md from dashboard-react</a>.
</blockquote>

> **Note:** This API is not intended for use in [site development](https://dev.wix.com/docs/api-reference/articles/platform-overview/about-wix-site-development.md) or when [coding in Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/code-in-blocks/about-coding-in-blocks.md).

The Dashboard React SDK is a collection of React utilities, components, and hooks that you can use to build Wix [dashboard extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/about-dashboard-extensions.md) with React. Together with the core [React SDK](https://dev.wix.com/docs/sdk/core-modules/sdk/introduction.md), it provides the tools needed to work with the rest of the JavaScript SDK APIs and [dashboard APIs](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) from within React components. You can also use this setup to make calls to Wix's [GraphQL API](https://dev.wix.com/docs/graphql.md).


## Setup

In order to use the Dashboard React SDK, install the `@wix/dashboard-react`, `@wix/sdk-react`, and `react` packages.

#### Install using npm

```sh
npm install @wix/dashboard-react @wix/sdk-react react
```

#### Install using yarn

```sh
yarn add @wix/dashboard-react @wix/sdk-react react
```

## Usage

To use the SDK, wrap your React component with the [`withDashboard()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) higher-order component:

```tsx
import { withDashboard } from '@wix/dashboard-react';

export default withDashboard(() => {
  return <div>Hello World</div>
});
```

### Use dashboard APIs

Use the [`useDashboard()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) hook to retrieve and use the [dashboard APIs](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md). 

For example:

```tsx
import { withDashboard, useDashboard } from '@wix/dashboard-react';

export default withDashboard(() => {
  const { showToast } = useDashboard();
  const showToastOnClick = () => {
    showToast({ message: 'Hello World' });
  };
    
  return <button onClick={showToastOnClick}>Show a toast</button>;
});
```

### Use JavaScript SDK APIs

When you wrap your component with [`withDashboard()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md), a [`WixProvider`](https://dev.wix.com/docs/sdk/core-modules/sdk/introduction.md) component is initialized with the dashboard host and authentication strategy. This allows you to use [`useWixModules()`](https://dev.wix.com/docs/sdk/core-modules/sdk-react/use-wix-modules.md) to retrieve and use JavaScript SDK APIs.

For example:

```tsx
import { withDashboard } from '@wix/dashboard-react';
import { useWixModules } from '@wix/sdk-react';
import { products } from '@wix/stores';
import { useEffect } from 'react';

export default withDashboard(() => {
  const [siteProducts, setSiteProducts] = useState<products.Product[]>([]);
  const { queryProducts } = useWixModules(products);

  useEffect(() => {
    queryProducts().find().then(products => setSiteProducts(products))
  }, []);

  return (
    <div>
      You have {siteProducts.length} products!
    </div>
  );
});
```