withDashboard

A higher-order component that initializes the Wix React SDK and the Wix Dashboard SDK. When you wrap a component with withDashboard(), a WixProvider component is initialized with the dashboard host and authentication strategy. This means any nested component can use React SDK hooks like useWixModules() and Dashboard React SDK hooks such as useDashboard(). Additionally, this component provides the dashboard's contextual state and environmental information to its child components.

Signature

1
<P extends {} = {}>(Component: React.ComponentType<P>) => React.ComponentType<unknown>

Parameters

Returns

React.ComponentType<unknown>

Examples

To set up a dashboard client for React, refer to the setup guide.

Wrap a component

Here is a basic example of how to wrap a component using withDashboard.

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

3
export default withDashboard(() => {
4
  // Use `@wix/sdk-react` and `@wix/dashboard-react` hooks here.
5
  return <div>Hello World</div>
6
});

Receive contextual state

This example shows how to retrieve a property called name from the dashboard's contextual state and use it in a component's code.

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

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