Activate or Deactivate Tools in Our Viewer Toolbar

It’s possible to control the main toolbar to programmatically activate or deactivate specific items or behaviors.

Launch Demo

Currently, our default toolbar buttons allow you to control:

  • The InteractionMode, which is the current interaction mode in the viewer.

  • The SidebarMode, which determines which sidebar to show.

  • One-off actions that don’t need a permanent (visual) activation state.

In addition, the main toolbar is completely customizable and can host custom toolbar items. Please refer to the Customize Existing Tools guide for more details.

Interaction Mode

The interaction mode is part of the PSPDFKit.ViewState API, and it controls the current interaction mode of the viewer. For example, you can use it to activate or deactivate a tool like the text annotation one.

You can change this mode using the setViewState instance method:

instance.setViewState((viewState) =>
	viewState.set("interactionMode", PSPDFKit.InteractionMode.TEXT)
);

As a result of activating the interaction mode, PSPDFKit for Web will also enable the free text annotation button in the toolbar and the corresponding annotation type toolbar.

To reset the interaction mode and deactivate the button, you can then set its value to null:

instance.setViewState(viewState => (
  viewState.set("interactionMode", null);
));

Please see the API Reference for a comprehensive list of the supported interaction modes.

It’s possible to control the viewer sidebar by changing the ViewState#sidebarMode.

One-Off Actions

A few items in the toolbar don’t activate a particular state, but instead trigger one-off actions like zooming or paginating.

Please see our API Reference to discover how each of these can be controlled programmatically.

Custom Toolbar Items

As mentioned above, it’s possible to customize the main toolbar to rearrange the default toolbar items or add new custom ones.

Custom items can even be grouped to create a dropdown menu. Please refer to our Customize Existing Tools guide for more details.

To activate a custom item, you need to mark an item as selected and update the toolbar items:

instance.setToolbarItems((items) => {
	return items.map((item) => {
		if (item.id === "my-item") {
			item.selected = true;
		}
		return item;
	});
});

Note that if your items define an onPress callback, activating an item won’t automatically invoke this function.