Using the handleNextClick and handlePrevClick on keydown events

[FranciscoMateusVG]

Hi! First of all, great package thanks a lot!

I was wandering if it was possible to call those functions (handleNextClick and handlePrevClick) on keydown events. Like for example, a user presses the "->" key and that would trigger the handleNextClick function.

[MGrin]

Hi! Thank you, I really appreciate your feedback :) In theory such a control can be added into the package itself, but I'm bot sure that the default navigation bar should intercept key presses of the whole page. It can break other part of application.

I'm ready to discuss if this should be inside the package or not, but currently you have a following option:

1. Make your PDF viewer controllable. So have your own state with the current page, and so you, inside your own code, intercept key presses, update your state and propagate it down to the PDF component
2. Make a custom navigation. In that case it's pretty much the same as option 1, but instead of controlling the page prop you'll just call a function to change page inside your custom navigation.

Let me know what do you think about these options :)

[FranciscoMateusVG]

@MGrin i made a custom navigation (option 2) and it worked like a charm. Much apreciated by the help, thanks a lot, if you ever come to Brazil the first round of beer is on me!

[komalharmale]

Hi have create custom navigation and trying to call handlePrevClick, handleNextClick from that function but not working <PDFViewer document={{ url: file, }} navigation={CustomNavigation} />

const CustomNavigation = props => { const classes = useStyles(); const { page, pages } = props; console.log("props",props)

const { handlePrevClick, handleNextClick } = props;

function downloadPDF() {
  window.open(file, '_blank');
}

return (
  <div className={classes.brochureFooter}>
    <Grid container>
      <Grid item xs={4}>
        <CustomPrevButton
          page={page}
          pages={pages}
          handlePrevClick={handlePrevClick}
        />
        <CustomNextButton
          page={page}
          pages={pages}
          handleNextClick={handleNextClick}
        />
      </Grid>
      <Grid item xs={4}>
        <CustomPages page={page} pages={pages} />
      </Grid>

    </Grid>
  </div>
);

};

[komalharmale]

@MGrin i made a custom navigation (option 2) and it worked like a charm. Much apreciated by the help, thanks a lot, if you ever come to Brazil the first round of beer is on me!

HEY can you please help me i am also facing the same issue