React Pretty Pdf Viewer

index.scss

.pdfViewer {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.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;
  box-shadow: 0 30px 40px 0 rgba(16, 36, 94, .2);
  border-radius: 4px;

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

  button {
    width: 44px;
    height: 44px;
    background: white;
    border: 0;
    font: inherit;
    font-size: .8em;
    border-radius: 4px;

    &: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;
    }
  }
}

pdf-viewer.tsx

import { useState } from 'react'
import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css'
import './index.scss'

export interface PdfViewerProps {
  file?: string
  width?: number
}

export const PdfViewer: React.FC<PdfViewerProps> = ({ file, width = 300 }) => {
  const [numPages, setNumPages] = useState(0)
  const [pageNumber, setPageNumber] = useState(1)

  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages)
  }

  return (
    <div className="pdfViewer">
      <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} width={width} />
        <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>
      </Document>
    </div>
  )
}