Execute a function when users click a bookmark item

By default, clicking a bookmark brings users to the corresponding destination that associates with the clicked bookmark. From v3.7.0, you are able to invoke a function when that event happens. It is highly recommended to take a look at this example to see how you can customize bookmark items.

We are going to the default renderers including the `defaultRenderItem`, `defaultRenderToggle` and `defaultRenderTitle` functions:

const renderBookmarkItem = (renderProps: RenderBookmarkItemProps) =>
    renderProps.defaultRenderItem(
        renderProps.onClickItem,
        <>
            {/* Render toggle icons ... */}

            {/* Render the bookmark title */}
            {renderProps.defaultRenderTitle(() => {
                renderProps.onClickTitle();
                // Invoke our function ...
            })}
        </>
    );

As mentioned in the Customize bookmark items example, the `defaultRenderTitle` function is triggered when users click a bookmark title:

defaultRenderTitle: (onClickBookmark: () => void) => React.ReactElement;

Property	Type	Description	From
`onClickBookmark`	`Function`	The function triggers when users click the title	3.7.0

In the following example, we use the `toggleBookmarkTab` function to toggle the Bookmark tab when users click a bookmark:

const toggleBookmarkTab = () => {
    toggleTab(1);
};

const renderBookmarkItem = (renderProps: RenderBookmarkItemProps) =>
    renderProps.defaultRenderItem(
        renderProps.onClickItem,
        <>
            ...
            {renderProps.defaultRenderTitle(() => {
                renderProps.onClickTitle();
                toggleBookmarkTab();
            })}
        </>
    );

The function is provided by an instance of the default layout plugin:

const defaultLayoutPluginInstance = defaultLayoutPlugin(...);

const { toggleTab } = defaultLayoutPluginInstance;

Clicking a bookmark will also toggle the Bookmark tab (The sample code)

Execute a function when users click a bookmark item

See also