Go Headless

Build Apps

Client

API Preview

Develop Websites

REST

Velo

GraphQL (Alpha)

# Dashboard React SDK

The Dashboard React SDK is a collection of React utilites, components, and hooks that you can use to build Wix [dashboard extensions](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/about-dashboard-extensions) with React. Together with the core [React SDK](portalId::b85dea5b-341b-493b-b99e-4d4ca12baaa2resourceId::c899a78f-c101-4042-8460-e6af464c8b36*fallback::https://dev.wix.com/docs/sdk/api-reference/sdk-react/setup), it provides the tools needed to work with the rest of the JavaScript SDK APIs and [dashboard APIs](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction) from within React components. You can also use this setup to make calls to Wix's [GraphQL API](fallback::https://dev.wix.com/docs/graphql).


## 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()`](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard-react/with-dashboard) higher-order component:

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

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

### Use dashboard APIs

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

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()`](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard-react/with-dashboard), a [`WixProvider`](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk-react/wix-provider) component is initialized with the dashboard host and authentication strategy. This allows you to use [`useWixModules()`](fallback::https://dev.wix.com/docs/sdk/core-modules/sdk-react/use-wix-modules) 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>
  );
});
```