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 with React. Together with the core React SDK, it provides the tools needed to work with the rest of the JavaScript SDK APIs and dashboard APIs from within React components. You can also use this setup to make calls to Wix's GraphQL API.

Setup

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

Install using npm

Copy
1
npm install @wix/dashboard-react @wix/sdk-react react

Install using yarn

Copy
1
yarn add @wix/dashboard-react @wix/sdk-react react

Usage

To use the SDK, wrap your React component with the withDashboard() higher-order component:

Copy
1
import { withDashboard } from '@wix/dashboard-react';
2


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

Use dashboard APIs

Use the useDashboard hook to retrieve and use the dashboard APIs.

For example:

Copy
1
import { withDashboard, useDashboard } from '@wix/dashboard-react';
2


3
export default withDashboard(() => {
4
  const { showToast } = useDashboard();
5
  const showToastOnClick = () => {
6
    showToast({ message: 'Hello World' });
7
  };
8
    
9
  return <button onClick={showToastOnClick}>Show a toast</button>;
10
});

Use JavaScript SDK APIs

When you wrap your component with withDashboard(), a WixProvider component is initialized with the dashboard host and authentication strategy. This allows you to use useWixModules() to retrieve and use JavaScript SDK APIs.

For example:

Copy
1
import { withDashboard } from '@wix/dashboard-react';
2
import { useWixModules } from '@wix/sdk-react';
3
import { products } from '@wix/stores';
4
import { useEffect } from 'react';
5


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


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


14
  return (
15
    <div>
16
      You have {siteProducts.length} products!
17
    </div>
18
  );
19
});
Was this helpful?
Yes
No