Read Table of contents links data or show separate outline.

[qaisershehzad]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Hello I need help with Table of Contents of a PDF file.

I have a PDF file with table of Contents which working fine normally. But I want to provide side menu from where user can navigate into PDF file. Left Outline like thing. Is there a way I can read Table of Contents of the PDF file so that I can generate a separate view for Table of contents. In PDF link navigation is fine..

As in below screenshot left side links from where user can navigate in PDF.
sample.pdf

Steps to reproduce

You can try to load attached sample.pdf

Expected behavior

Looking for table of contents links information

Actual behavior

Not able to read links information.

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Webpack version (if applicable):
  latest version
  react 17

[ricardoc05]

Below I copy the piece of code that I use to display the table of contents in a side panel, but I still haven't figured out how to style it the way I want

<Grid xl={6}> <Box sx={{ my: 4 }}> <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options} > <Drawer variant="persistent" anchor="left" open={state}> <DrawerHeader> <Typography variant="body3" display="block" color='black' gutterBottom> INDICE </Typography> <IconButton onClick={TOCClose}> <ChevronLeftIcon /> </IconButton> </DrawerHeader> <Divider /> <Outline onItemClick={clickTOC} onLoadSuccess={(outline) => toc(outline)} /> </Drawer> <Page key={page_${page}} pageNumber={page} onRenderSuccess={onPageRenderSuccess} customTextRenderer={textRenderer} renderTextLayer="true" /> </Document> <Pagination page={page} count={numPages} color="primary" onChange={(e, page) => setPage(page)} /> </Box> </Grid>