react-browser-scrollbar/dist/react-browser-scrollbar.esm.js

lightweight Scrollbar for ReactJs

import React, { forwardRef, useEffect, useId } from 'react';

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

// export const uid = () => Math.random().toString(36).substring(2)
var customizeStyle = function customizeStyle(_ref) {
  var id = _ref.id,
      thumbSize = _ref.thumbSize;
  var selector = "[data-rbs=" + id + "]";
  var css = '';

  if (thumbSize !== undefined) {
    if (thumbSize === 0) {
      css += "\n            " + selector + "::-webkit-scrollbar{width: 0px; height: 0px}\n            " + selector + "{scrollbar-width: none}\n         ";
    } else {
      css += "\n            " + selector + "::-webkit-scrollbar{width: " + thumbSize + "px; height: " + thumbSize + "px}\n            " + selector + "{scrollbar-width: thin}\n         ";
    }
  }

  return css;
};

var loadStyle = (function () {
  var is = document.getElementById('rbs');

  if (!is) {
    var style = document.createElement('style');
    style.id = 'rbs';
    document.head.append(style);
    style.innerHTML = "\n   .rbs{\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n   }\n   \n   ::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n   }\n\n   ::-webkit-scrollbar-track {\n      background: transparent\n   }\n   ::-webkit-scrollbar-thumb {\n      border-radius: 8px;\n      -webkit-border-radius: 8px;\n      background-clip: content-box;\n      background: rgba(11,20,26,.2);\n      \n   }\n   ::-webkit-scrollbar-thumb:hover{\n      background: rgba(11,20,26,.3)\n   }\n   .rbs-autohide:not(:hover, :active)::-webkit-scrollbar-thumb, .rbs-autohide:not(:hover, :active)::-webkit-scrollbar-track{\n      background-color: transparent\n   }\n\n   * {\n      scrollbar-color: rgba(11,20,26,.2) rgba(0,0,0,.05);\n      scrollbar-width: thin\n   }\n\n   .rbs-autohide:not(:hover, :active){\n      scrollbar-color: transparent transparent;\n   }\n\n   .rbs-dark::-webkit-scrollbar-thumb{\n      background: rgba(255,255,255,.16);\n   }\n\n   .rbs-dark::-webkit-scrollbar-thumb:hover{\n      background: rgba(255,255,255,.26);\n   }\n\n   .rbs-dark{\n      scrollbar-color: rgba(255,255,255,.26) tranparent;\n   }\n\n";
  }
});

var _excluded = ["children", "darkMode", "autoHide", "thumbSize", "onScroll", "onScrollEnd", "onScrollStop", "onScrollStart", "className"];
var isScrolling = null;
var isStarted = false;
var Scrollbar = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
      darkMode = _ref.darkMode,
      autoHide = _ref.autoHide,
      thumbSize = _ref.thumbSize,
      onScroll = _ref.onScroll,
      onScrollEnd = _ref.onScrollEnd,
      onScrollStop = _ref.onScrollStop,
      onScrollStart = _ref.onScrollStart,
      className = _ref.className,
      rest = _objectWithoutPropertiesLoose(_ref, _excluded);

  useEffect(function () {
    if (ref) {
      ref.scrollTo = function (pos) {
        ref.current.scrollTo({
          top: pos,
          behavior: 'smooth'
        });
      };

      ref.scrollToBottom = function () {
        ref.scrollTo(ref.current.scrollHeight);
      };

      ref.scrollToTop = function () {
        ref.scrollTo(0);
      };
    }

    loadStyle();
  }, []);

  var _uid = useId().replace(/:/gi, '');

  var cls = "rbs " + (className ? className : '');
  cls += darkMode ? ' rbs-dark' : '';
  cls += autoHide ? ' rbs-autohide' : '';
  var props = {};

  if (onScroll || onScrollEnd || onScrollStop || onScrollStart) {
    props.onScroll = function (e) {
      if (onScrollEnd) {
        var ele = e.target;
        var scrollTop = ele.scrollTop;
        var scrollHeight = ele.scrollHeight;
        var clientHeight = ele.clientHeight;
        var isScrollDown = scrollHeight - scrollTop === clientHeight;
        isScrollDown && onScrollEnd(e);
      }

      if (onScrollStop) {
        clearTimeout(isScrolling);
        isScrolling = setTimeout(function () {
          return onScrollStop(e);
        }, 150);
      }

      if (onScrollStart && !isStarted) {
        onScrollStart(e);
        isStarted = true;
        setTimeout(function () {
          return isStarted = false;
        }, 500);
      }

      onScroll && onScroll(e);
    };
  }

  return React.createElement(React.Fragment, null, React.createElement("style", null, customizeStyle({
    id: _uid,
    thumbSize: thumbSize,
    autoHide: autoHide
  })), React.createElement("div", Object.assign({}, rest, {
    ref: ref,
    className: cls
  }, props, {
    "data-rbs": _uid
  }), children));
});

export default Scrollbar;
//# sourceMappingURL=react-browser-scrollbar.esm.js.map