React-pdf: What component you used on your site for page navigation?

[sundriver]

What are you trying to achieve? Please describe.

I am trying to make a online pdf reader with page navigation exactly to what you have on your website, with page navigation buttons overlaid on top of the pdf file.

Is there any chance you can share the react source code for the page ? or some advise to recreate it.

[wojtekmaj]

There's really nothing fancy going on there :)

      <div className="page-controls">
        <button
          disabled={pageNumber <= 1}
          onClick={() => setPageNumber(pageNumber - 1)}
          type="button"
          aria-label="Previous page"
        >
          ‹
        </button>
        <span>
          {pageNumber}
          {' '}
          of
          {' '}
          {numPages}
        </span>
        <button
          disabled={pageNumber >= numPages}
          onClick={() => setPageNumber(pageNumber + 1)}
          type="button"
          aria-label="Next page"
        >
          ›
        </button>
      </div>

.react-pdf__Document {
  position: relative;

  &:hover {
    .page-controls {
      opacity: 1;
    }
  }
}

.page-controls {
  position: absolute;
  bottom: 5%;
  left: 50%;
  background: white;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity ease-in-out 0.2s;
  .shadow();
  .rounded-corners();

  span {
    font: inherit;
    font-size: .8em;
    padding: 0 .5em;
  }

  button {
    width: 44px;
    height: 44px;
    background: white;
    border: 0;
    font: inherit;
    font-size: .8em;
    .rounded-corners();

    &:enabled {
      &:hover {
        cursor: pointer;
      }

      &:hover, &:focus {
        background-color: #e6e6e6;
      }
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}