0

In the React-pdf library, the onitemclick props of the Outline component only works once, while the same props but of the Document component always work. I send the piece of code, where you can see that the Outline component is wrapped in a MUI Drawer component, so that the outline is rendered in a sidebar.

 const [page, setPage] = useState(1);


 const clickTOC = ({ pageNumber: itemPageNumber }) => {
        setPage(itemPageNumber)
    }


<Grid xl={6}>
   <Box sx={{ my: 4 }}>
      <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options} onItemClick={clickTOC}>
      <Page key={`page_${page}`} pageNumber={page} onRenderSuccess={onPageRenderSuccess} customTextRenderer={textRenderer} renderTextLayer="true" />
      <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 />
          <Box sx={{ width: drawerWidth }} role="presentation">
            <Outline onItemClick={clickTOC} onLoadSuccess={(outline) => toc(outline)} />
          </Box>
      </Drawer>
    </Document>
    <Pagination page={page} count={numPages} color="primary" onChange={(e, page) => setPage(page)} />
   </Box>
</Grid>
Ricardo Capozza
  • 31
  • 4
  • I was able to find an alternative way to the problem with the outline links, which worked only once and consisted in changing the variant property of the Drawer component from variant="persistent" to variant= "temporary", so the links work every time click them. When working in this way I had to relegate the persistence of the sidebar – Ricardo Capozza Dec 11 '22 at 17:15

0 Answers0