Is there a way to tie into the onClick function in bookmarks?

[kdv24]

We'd like to close the bookmark window for mobile or small screen users once they click on a given bookmark. As it is, the bookmarks panel covers the mobile viewport enough that it's hard to have context.

[phuocng]

Thanks for your request. I will support it in the next version.

[kdv24]

That's fabulous! Thank you!

[phuocng]

@kdv24 The feature is implemented in the latest code, and will be included in the next v3.7.0.

Demo

Clicking a bookmark item will close the bookmark tab. You can do something else

https://user-images.githubusercontent.com/57786711/184640544-9a6a1c17-4c53-4184-a133-79f184ba1c66.mp4

API

You can see the sample code here.

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

const renderBookmarkItem = (renderProps: RenderBookmarkItemProps) =>
    renderProps.defaultRenderItem(
        renderProps.onClickItem,
        <>
            {renderProps.defaultRenderToggle(<ExpandIcon />, <CollapseIcon />)}
            {renderProps.defaultRenderTitle(() => {
                // ---> Executed when clicking a bookmark item
                renderProps.onClickTitle();
                toggleBookmarkTab();
            })}
        </>
    );

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    ...
});

const { toggleTab } = defaultLayoutPluginInstance;
const bookmarkPluginInstance = defaultLayoutPluginInstance.bookmarkPluginInstance;
const { Bookmarks } = bookmarkPluginInstance;

[kdv24]

Great! Thank you @phuocng!

[phuocng]

@kdv24 The example is now available on the official website https://react-pdf-viewer.dev/examples/execute-a-function-when-users-click-a-bookmark-item/