OptionalonInvoked once, when the component is mounted to the DOM. Use it for setup tasks such as attaching event listeners, firing analytics events, etc.
Triggering action when the comment thread is mounted:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: (instance, id) => {
const div = document.createElement("div");
return {
render: (params) => {
// Return a DOM Node.
div.innerText = `This is a custom UI for the comment thread`;
return div;
},
onMount: (id) => {
console.log(`Comment thread mounted with id: ${id}`);
// You can add event listeners or perform other setup actions here.
},
};
},
},
});
OptionalonInvoked once, when the component is unmounted from the DOM. Use it for cleanup tasks such as removing event listeners, etc.
Triggering action when the comment thread is unmounted:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: (instance, id) => {
const div = document.createElement("div");
return {
render: (params) => {
// Return a DOM Node.
div.innerText = `This is a custom UI for the comment thread`;
return div;
},
onUnmount: (id) => {
console.log(`Comment thread unmounted with id: ${id}`);
// You can remove event listeners or perform other cleanup actions here.
},
};
},
},
});
OptionalrenderThe render function is called whenever any params change that may affect the UI and expects a DOM element to be returned.
The returned DOM Node from render will be placed into the specified slot.
This may be called any number of times.
You should treat this as a pure function and always return a DOM element based on the current params.
Use a slot configuration to customize rendering and work with lifecycle methods. You can think of slots as predefined placeholders in the Web SDK UI where you can place your custom UI. The slots themselves might have a default UI, which can be replaced with a custom one, or they might be empty, enabling you to insert your own UI.
See
https://www.nutrient.io/guides/web/user-interface/ui-customization/introduction/#slots