Interface: RendererConfiguration

This object defines the properties of a custom annotation renderer.

It's returned from a PSPDFKit.CustomRenderers.AnnotationCustomRendererCallback function.

Note that when append=false (which is the default value for the property), the default appearance of the annotation is not rendered, including the pointer event listeners.

This means that, if you want you custom content to select the annotation when clicked, you'll have to add some logic to support it.

You can add an event listener to your node in your custom renderer code, and also supply a callback to the onDisappear property to remove the listener:

PSPDFKit.load({
  customRenderers: {
    Annotation: ({ annotation }) => {
      function selectAnnotation(event) {
        event.stopImmediatePropagation();
        instance.setSelectedAnnotation(annotation.id);
      }
      const node = document.createElement("div").appendChild(document.createTextNode("Custom rendered!"));
      node.addEventListener("pointerdown", selectAnnotation, {
        capture: true
      });
      return {
        node,
        append: false,
        onDisappear: () => {
          node.removeEventListener("pointerdown", selectAnnotation, {
            capture: true
          });
        }
      };
    }
  }
});

The onDisappear callback function will be run whenever the returned node reference changes, and when the custom rendered component unmounts (is removed from the DOM). With this in mind, and in order to save the browser some unnecessary work, you could rewrite the previous example as follows:

let node
PSPDFKit.load({
  customRenderers: {
    Annotation: ({ annotation }) => {
      function selectAnnotation(event) {
        event.stopImmediatePropagation();
        instance.setSelectedAnnotation(annotation.id);
      }
      if (!node) {
        node = document.createElement("div").appendChild(document.createTextNode("Custom rendered!"));
        node.addEventListener("pointerdown", selectAnnotation, {
          capture: true
        });
      }
      return {
        node,
        append: false,
        onDisappear: () => {
          node.removeEventListener("pointerdown", selectAnnotation, {
            capture: true
          });
        }
      };
    }
  }
});

In this example the onDisappear() reference changes on every call, but since the node reference doesn't change, onDisappear() will only be called when the component unmounts.

Note that the component does not only unmount when the page it's included is scrolled some pages out, but also, for example, when the annotation it's associated with is selected in the UI, in which case the component is unmounted and mounted again.