This module is deprecated. For more information, see Migrating from dashboard-react.
Note: This API is not intended for use in site development or when coding in Blocks.
The Dashboard React SDK is a collection of React utilities, 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.
In order to use the Dashboard React SDK, install the @wix/dashboard-react
, @wix/sdk-react
, and react
packages.
npm install @wix/dashboard-react @wix/sdk-react react
yarn add @wix/dashboard-react @wix/sdk-react react
To use the SDK, wrap your React component with the withDashboard()
higher-order component:
import { withDashboard } from "@wix/dashboard-react";
export default withDashboard(() => {
return <div>Hello World</div>;
});
Use the useDashboard()
hook to retrieve and use the dashboard APIs.
For example:
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>;
});
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:
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>;
});