renderPanel
Renders the Maestro panel UI into a specified DOM element.
Overview
The renderPanel
method renders the interactive panel into a specified DOM element, allowing users to interact with key plays, stats, and other features. This method should be called after successfully initializing an event with userDidStartWatchingEvent
.
Method Signature
type UnmountFn = () => void;
renderPanel(id: string): Promise<UnmountFn>
Parameters
Parameter | Type | Description |
---|---|---|
id | string | The ID of the DOM element where the panel should be rendered |
Return Value
A Promise that resolves to an unmount function. When called, this function will remove the panel from the DOM and clean up any associated resources.
Example
import React, { useEffect } from "react";
import SDK from "@maestro_io/maestro-web-sdk";
const Panel = () => {
useEffect(() => {
let cleanupFn: (() => void) | null = null;
SDK.renderPanel("panel-container").then(async (unmountFn) => {
cleanupFn = unmountFn;
// Notify the SDK that the panel is now visible
const event = SDK.getMaestroEventViewModel();
await event.didShowPanel();
});
return () => {
if (cleanupFn) {
cleanupFn();
}
};
}, []);
return <div id="panel-container" class="panel-container"></div>;
};
DOM Element Structure
The DOM element with the specified ID should be prepared before calling this method:
<div id="panel-container" class="panel-container"></div>
Notes
- This method requires that an event has been initialized with
userDidStartWatchingEvent
. - The specified DOM element must exist in the document.
- After rendering the panel, you should call
didShowPanel()
on the event view model to notify the SDK. - Similarly, after unmounting the panel, you should call
didHidePanel()
on the event view model.