react-go-to-top-customisable-button/dist/index.es.js

A customizable 'Back to Top' button for React apps with smooth animations and custom styling.

import { jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';

const BackToTop = ({ size = 50, position = "bottom-right", backgroundColor = "#000", textColor = "#fff", icon = "⬆️", scrollThreshold = 300, transitionDuration = 300, }) => {
    const [visible, setVisible] = useState(false);
    useEffect(() => {
        const handleScroll = () => {
            setVisible(window.scrollY > scrollThreshold);
        };
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, [scrollThreshold]);
    const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: "smooth" });
    };
    const getPositionStyle = () => {
        const baseStyle = { position: "fixed", margin: "20px" };
        switch (position) {
            case "top-left":
                return Object.assign(Object.assign({}, baseStyle), { top: 0, left: 0 });
            case "top-right":
                return Object.assign(Object.assign({}, baseStyle), { top: 0, right: 0 });
            case "bottom-left":
                return Object.assign(Object.assign({}, baseStyle), { bottom: 0, left: 0 });
            case "bottom-right":
            default:
                return Object.assign(Object.assign({}, baseStyle), { bottom: 0, right: 0 });
        }
    };
    return (jsx("button", { onClick: scrollToTop, style: Object.assign(Object.assign({}, getPositionStyle()), { width: `${size}px`, height: `${size}px`, borderRadius: "50%", backgroundColor, color: textColor, border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "20px", transition: `opacity ${transitionDuration}ms ease-in-out`, opacity: visible ? 1 : 0, visibility: visible ? "visible" : "hidden" }), "aria-label": "Back to top", role: "button", children: icon }));
};

export { BackToTop };
//# sourceMappingURL=index.es.js.map