@logicamente.info/react-pdf-viewer/es/Components/NavigationBar.js

A React PDF viewer component, bootstrap compatible, with controls based on PDF.js.

import React from 'react';
import PropTypes from 'prop-types';
import NextPageButton from './Navigation/NextPageButton';
import PagesIndicator from './Navigation/PagesIndicator';
import PreviousPageButton from './Navigation/PreviousPageButton';
import ZoomIn from './Navigation/ZoomIn';
import ZoomOut from './Navigation/ZoomOut';
import ResetZoom from './Navigation/ResetZoom';
import RotateLeft from './Navigation/RotateLeft';
import ResetRotation from './Navigation/ResetRotation';
import RotateRight from './Navigation/RotateRight';

var Navigation = function Navigation(_ref) {
  var page = _ref.page,
      pages = _ref.pages,
      scale = _ref.scale,
      defaultScale = _ref.defaultScale,
      maxScale = _ref.maxScale,
      minScale = _ref.minScale,
      rotationAngle = _ref.rotationAngle,
      hideZoom = _ref.hideZoom,
      hideRotation = _ref.hideRotation,
      css = _ref.css,
      handlePrevClick = _ref.handlePrevClick,
      handleNextClick = _ref.handleNextClick,
      handleZoomIn = _ref.handleZoomIn,
      handleResetZoom = _ref.handleResetZoom,
      handleZoomOut = _ref.handleZoomOut,
      handleRotateLeft = _ref.handleRotateLeft,
      handleResetRotation = _ref.handleResetRotation,
      handleRotateRight = _ref.handleRotateRight;
  return /*#__PURE__*/React.createElement("div", {
    className: "row " + (css.navbarWrapper || 'text-white bg-dark py-4')
  }, hideZoom ? /*#__PURE__*/React.createElement("div", {
    className: "col-4"
  }) : /*#__PURE__*/React.createElement("div", {
    className: "col-4 text-left"
  }, /*#__PURE__*/React.createElement(ZoomOut, {
    scale: scale,
    minScale: minScale,
    defaultScale: defaultScale,
    css: css.zoomOutBtn,
    handleZoomOut: handleZoomOut
  }), /*#__PURE__*/React.createElement(ResetZoom, {
    scale: scale,
    defaultScale: defaultScale,
    css: css.resetZoomBtn,
    handleResetZoom: handleResetZoom
  }), /*#__PURE__*/React.createElement(ZoomIn, {
    scale: scale,
    maxScale: maxScale,
    defaultScale: defaultScale,
    css: css.zoomInBtn,
    handleZoomIn: handleZoomIn
  })), /*#__PURE__*/React.createElement("div", {
    className: "col-4 text-center"
  }, /*#__PURE__*/React.createElement(PreviousPageButton, {
    css: css.previousPageBtn,
    page: page,
    pages: pages,
    handlePrevClick: handlePrevClick
  }), /*#__PURE__*/React.createElement(PagesIndicator, {
    css: css.pageIndicator,
    page: page,
    pages: pages
  }), /*#__PURE__*/React.createElement(NextPageButton, {
    css: css.nextPageBtn,
    page: page,
    pages: pages,
    handleNextClick: handleNextClick
  })), hideRotation ? /*#__PURE__*/React.createElement("div", {
    className: "col-4"
  }) : /*#__PURE__*/React.createElement("div", {
    className: "col-4 text-right"
  }, /*#__PURE__*/React.createElement(RotateLeft, {
    css: css.rotateLeftBtn,
    rotationAngle: rotationAngle,
    handleRotateLeft: handleRotateLeft
  }), /*#__PURE__*/React.createElement(ResetRotation, {
    css: css.resetRotationBtn,
    rotationAngle: rotationAngle,
    handleResetRotation: handleResetRotation
  }), /*#__PURE__*/React.createElement(RotateRight, {
    css: css.rotateRightBtn,
    rotationAngle: rotationAngle,
    handleRotateRight: handleRotateRight
  })));
};

Navigation.propTypes = process.env.NODE_ENV !== "production" ? {
  page: PropTypes.number.isRequired,
  pages: PropTypes.number.isRequired,
  scale: PropTypes.number,
  defaultScale: PropTypes.number,
  maxScale: PropTypes.number,
  minScale: PropTypes.number,
  rotationAngle: PropTypes.number,
  hideZoom: PropTypes.bool,
  hideRotation: PropTypes.bool,
  css: PropTypes.shape({
    navbarWrapper: PropTypes.string,
    pages: PropTypes.string,
    pageIndicator: PropTypes.string,
    previousPageBtn: PropTypes.string,
    nextPageBtn: PropTypes.string,
    zoomOutBtn: PropTypes.string,
    resetZoomBtn: PropTypes.string,
    zoomInBtn: PropTypes.string,
    rotateLeftBtn: PropTypes.string,
    resetRotationBtn: PropTypes.string,
    rotateRightBtn: PropTypes.string
  }),
  elements: PropTypes.shape({
    previousPageBtn: PropTypes.any,
    nextPageBtn: PropTypes.any,
    pages: PropTypes.any
  }),
  handlePrevClick: PropTypes.func.isRequired,
  handleNextClick: PropTypes.func.isRequired,
  handleZoomIn: PropTypes.func.isRequired,
  handleResetZoom: PropTypes.func.isRequired,
  handleZoomOut: PropTypes.func.isRequired,
  handleRotateLeft: PropTypes.func.isRequired,
  handleResetRotation: PropTypes.func.isRequired,
  handleRotateRight: PropTypes.func.isRequired
} : {};
Navigation.defaultProps = {
  css: {},
  elements: {}
};
export default Navigation;