react-draggable-scroll-to-top/dist/index.js

A draggable scroll-to-top button component for React

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var reactDraggableFloatBtn = require('react-draggable-float-btn');

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".scroll-to-top-draggable:hover{box-shadow:0 4px 15px rgba(0,0,0,.3);filter:brightness(1.1)}";
styleInject(css_248z);

const ScrollToTopDraggable = ({ className = "", style = {}, children, onClick, onDragStart, onDragEnd, defaultPosition = "bottom-right", position, draggable = true, size = "medium", showAfter = 300, smooth = true, duration = 500, behavior = "smooth", }) => {
    const [isVisible, setIsVisible] = React.useState(false);
    // Handle scroll visibility
    React.useEffect(() => {
        const toggleVisibility = () => {
            if (window.pageYOffset > showAfter) {
                setIsVisible(true);
            }
            else {
                setIsVisible(false);
            }
        };
        window.addEventListener("scroll", toggleVisibility);
        // Check initial scroll position
        toggleVisibility();
        return () => {
            window.removeEventListener("scroll", toggleVisibility);
        };
    }, [showAfter]);
    // Smooth scroll to top with custom duration
    const smoothScrollToTop = React.useCallback(() => {
        const startPosition = window.pageYOffset;
        const startTime = performance.now();
        const easeInOutQuad = (t) => {
            return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
        };
        const animateScroll = (currentTime) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const easing = easeInOutQuad(progress);
            window.scrollTo(0, startPosition * (1 - easing));
            if (progress < 1) {
                requestAnimationFrame(animateScroll);
            }
        };
        requestAnimationFrame(animateScroll);
    }, [duration]);
    // Handle click - only scroll to top
    const handleClick = React.useCallback(() => {
        if (smooth && duration > 0) {
            smoothScrollToTop();
        }
        else {
            window.scrollTo({
                top: 0,
                behavior: behavior,
            });
        }
        if (onClick) {
            onClick();
        }
    }, [smooth, duration, behavior, onClick, smoothScrollToTop]);
    const defaultContent = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 256 256" },
        React.createElement("path", { fill: "currentColor", d: "M213.66 165.66a8 8 0 0 1-11.32 0L128 91.31l-74.34 74.35a8 8 0 0 1-11.32-11.32l80-80a8 8 0 0 1 11.32 0l80 80a8 8 0 0 1 0 11.32" })));
    return (React.createElement(reactDraggableFloatBtn.FloatingButton, { className: `scroll-to-top-draggable ${className}`, style: Object.assign({ cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", opacity: isVisible ? 1 : 0, visibility: isVisible ? "visible" : "hidden", pointerEvents: isVisible ? "auto" : "none", zIndex: 9999 }, style), onClick: handleClick, onDragStart: onDragStart, onDragEnd: onDragEnd, defaultPosition: defaultPosition, position: position, draggable: draggable, size: size }, children || defaultContent));
};

exports.default = ScrollToTopDraggable;
//# sourceMappingURL=index.js.map