ReactJS | Customizing user interace

Technical Support
12

Hello,

Apologies for the delay.

I think it would be easier to take the current tools we have and put them in the header.

For example, we can take the rectangle tool and put it in the header like so:

      instance.UI.setHeaderItems(header => {
        const rectangleToolButton = {
          type: 'toolButton',
          toolName: 'AnnotationCreateRectangle',
          dataElement: 'rectangleToolButton', 
          title: 'Rectangle Tool',
          img: 'icon-header-rectangle',
        };
      
        header.getHeader('default').push(rectangleToolButton);
      });

This should allow you to set the tool style.

You could also consider making your own custom tool and registering it. I found this other forum post where you can use the code provided to create a custom tool. Here is the post: Help with Custom Rectangle tool button

    const newRectangleTool = new Tools.RectangleCreateTool(documentViewer);

    newRectangleTool.setStyles({
      StrokeColor: new Annotations.Color(255, 255, 0),
      //StrokeThickness: "30pt",
    });

    instance.UI.registerTool({
      toolName: "RedactTool",
      buttonName: "RedactTool",
      toolObject: newRectangleTool,
      showColor: "always",
      tooltip: "Redact",
      buttonImage: "https://www.pdftron.com/favicon-32x32.png",
    });

    instance.UI.setHeaderItems((header) => {
      const items = header.getItems();
      items[items.length - 1] = {
        type: "toolButton",
        toolName: "RedactTool",
      };
      header.update(items);
    });