@nadfri/react-scroll-progress-bar/dist/react-scroll-progress-bar.esm.js

### Add a progress bar on the top of your page to indicate the position of the scroll page

import React, { useRef, useEffect } from 'react';

function ProgressBar(_ref) {
  var color1 = _ref.color1,
      color2 = _ref.color2,
      position = _ref.position,
      height = _ref.height;
  var progressBar_ref = useRef(null);

  var handleScroll = function handleScroll() {
    var page = document.documentElement; //element HTML

    var totalHeight = page.scrollHeight; //Height Total of page

    var visibleHeight = page.clientHeight; //Height visible

    var scrolling = page.scrollTop; //size of scroll

    var max = totalHeight - visibleHeight;
    progressBar_ref.current.style.width = Math.floor(scrolling / max * 100) + '%'; //width in %
  };

  useEffect(function () {
    window.addEventListener('scroll', handleScroll);
    return function () {
      return window.removeEventListener('scroll', handleScroll);
    };
  }, []); //Defaults values

  var positions = ['fixed', 'absolute', 'relative', 'sticky', 'static'];
  color1 = typeof color1 === 'string' && color1 !== '' ? color1 : '#808080';
  color2 = typeof color2 === 'string' && color2 !== '' ? color2 : '#ffd700';
  height = typeof height === 'string' && height !== '' ? height : '4px';
  position = !positions.includes(position) ? 'fixed' : position; //Inline style

  var styles = {
    container: {
      position: position,
      height: height,
      backgroundColor: color1,
      zIndex: '999',
      width: '100%',
      top: '0',
      left: '0'
    },
    progressBar: {
      backgroundColor: color2,
      transition: 'all 0.5s ease-out',
      width: '0%',
      height: '100%'
    }
  };
  return React.createElement("div", {
    style: styles.container
  }, React.createElement("div", {
    style: styles.progressBar,
    ref: progressBar_ref
  }));
}

export { ProgressBar };
//# sourceMappingURL=react-scroll-progress-bar.esm.js.map