Set a bookmark expanded or collapsed initially

In v3.2.0 and earlier versions, all bookmarks were expanded by default. However, from v3.3.0, a bookmark will be shown or hidden initially depending on its data structure. You can see this behaviour on popular viewers such as Acrobat Reader.

That version also provides the ability of expanding or collapsing a bookmark initially. You can use the `setBookmarkExpanded` property of the `Bookmarks` component:

import { bookmarkPlugin } from '@react-pdf-viewer/bookmark';

const bookmarkPluginInstance = bookmarkPlugin();
const { Bookmarks } = bookmarkPluginInstance;

<Bookmarks isBookmarkExpanded={...} />;

The `isBookmarkExpanded` property is a function that accepts a single parameter consisting of the following properties:

Property	Type	Description	From
`bookmark`	`PdfJs.Outline`	The bookmark data structure	3.3.0
`depth`	`number`	The current depth	3.3.0
`doc`	`PdfJs.PdfDocument`	The current document	3.3.0
`index`	`number`	The zero-based index of bookmark relative to its parent	3.3.0

Expanding or collapsing all bookmarks initially can be done easily:

// Expand bookmarks initially
const setBookmarkExpanded = ({ bookmark, depth, doc, index }) => true;

// Collapse bookmarks initially
const setBookmarkExpanded = ({ bookmark, depth, doc, index }) => false;

The following sample code expands bookmarks whose depth are zero:

const setBookmarkExpanded = ({ bookmark, depth, doc, index }) => depth === 0;

<Bookmarks isBookmarkExpanded={setBookmarkExpanded} />;

The document used in the example below has some bookmarks whose depths and indices are listed as following:

Bookmark title	`depth`	`index`
`Contents`	0	0
`Preface`	0	1
`--- Who should read this guide?`	1	0
`--- Related documentation`	1	1
`Parameters for Opening PDF Files`	0	2
`--- Parameters`	1	0
`--- Specifying parameters in a URL`	1	1
`------ URL examples`	2	0
`------ URL limitations`	2	1

(The sample code)

Set a bookmark expanded or collapsed initially

See also