Interface: CustomUIConfiguration

Example

//Fully customized sidebar

PSPDFKit.load({
  customUI: {
    [PSPDFKit.UIElement.Sidebar]: {
      [PSPDFKit.SidebarMode.CUSTOM]({ containerNode }) {
        // ReactDOM.createPortal() can be used as well.
        // Or Vue portals, or any other framework API that allows appending components
        // to arbitrary DOM nodes.
        // Using vanilla JS, you can just append a node to parentNode.
        const div = document.createElement("div");
        div.append("My custom sidebar");
        containerNode.appendChild(div);

        return {
          // By returning the same node that was provided, we opt-out of having the node
          // appended. If we return a different node, it will be appended to the provided node.
          node: containerNode,
        };
      }
    }
  }
});

//Partially customized sidebar

PSPDFKit.load({
  customUI: {
    [PSPDFKit.UIElement.Sidebar]: {
      [PSPDFKit.SidebarMode.ANNOTATIONS]({ containerNode }) {
        containerNode.style.padding = "0.5rem";

        if (!containerNode.querySelector(".MyCustomSidebarComponentHeader")) {
          const header = document.createElement("div");
          header.classList.add("MyCustomSidebarComponentHeader");
          containerNode.prepend(header);
        }

        return {
          node: containerNode,
          onRenderItem({ itemContainerNode, item: annotation }) {
            const footerAuthor = itemContainerNode.querySelector(".PSPDFKit-Sidebar-Annotations-Footer span");
            // Change the format of the footer text by prefixing it with "Creator: " and removing the date
            footerAuthor.textContent = `Creator: ${annotation.creatorName}`;

            // Add aria label to the annotation icon
            const annotationIcon = itemContainerNode.querySelector(".PSPDFKit-Icon");
            annotationIcon.setAttribute("aria-label", `Icon for an annotation created by ${annotation.creatorName}.`);
          }
        };
      }
    }
  }
});