Namespace UI

Example

Here's how to pass a slot configuration to fully replace the comment thread UI:

NutrientViewer.load({
  // ... Your configuration.
  ui: {
    commentThread: (instance, id) => {
      return {
        render: (params) => {
          const div = document.createElement("div");

          // Return a DOM Node.
          return div;
        },
      };
    },
  },
});
Copy

In addition to the render method, you can also define lifecycle methods in the object returned by the function. These methods enable you to perform actions at specific points in the component’s lifecycle. They’re also useful for effects such as adding event listeners or performing cleanup.

Example

Usage of lifecycle methods - onMount and onUnmount

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.
        },
        onUnmount: (id) => {
          console.log(`Comment thread unmounted with id: ${id}`);
          // You can remove event listeners or perform other cleanup actions here.
        },
      };
    },
  },
});
Copy