Registers a layerStateChange event handler for a dashboard page, modal, or plugin extension. This allows you to refresh a component's data when it becomes active, or pause resource intensive operations when the component is running in the background.
onLayerStateChange() accepts a callback that's triggered whenever the extension moves from the foreground to the background, or vise versa. For example, this can happen when a Wix user opens or closes a modal.
(callback: (state: 'foreground' | 'background') => void) => { remove: () => void; };| Name | Type | Description |
|---|---|---|
callback | Function | Called when the layerStateChange event fires. The function receives the extension's new layer state, "foreground" or "background", as an argument. |
{ remove: () => void; }An object containing a function called remove(). Calling this function removes the onLayerStateChange event handler.
Note: To use this method in self-hosted apps, you need to create a client. See the setup guide for more details.
Note: This example calls dashboard.onBeforeUnload() to display use of the remove() function.
import { dashboard } from "@wix/dashboard";
import { refreshData } from "./data-retrieval.js";
const { remove } = dashboard.onLayerStateChange((state) => {
if (state === "foreground") {
refreshData();
}
});
// Remove the onLayerStateChange handler when the `beforeUnload` event is triggered.
dashboard.onBeforeUnload(() => {
remove();
});