@elacity-js/uikit/dist/components/ScrollToTopButton.js

React / Material UI Design kit for Elacity project

import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import IconButton from '@mui/material/IconButton';
import { styled } from '@mui/material/styles';
import { ArrowUpward } from '@mui/icons-material';

const ScrollToTopButton = styled(IconButton, {
    shouldForwardProp: (prop) => !['visible'].includes(prop),
})(({ theme, visible }) => ({
    background: theme.palette.background.default,
    boxShadow: theme.shadows[6],
    position: 'fixed',
    right: theme.spacing(2),
    bottom: theme.spacing(3),
    zIndex: theme.zIndex.appBar,
    transition: 'opacity 0.5s ease-in-out',
    [theme.breakpoints.down('sm')]: {
        bottom: theme.spacing(1),
    },
    opacity: visible ? 1 : 0,
}));
var ScrollToTop = () => {
    const [isVisible, setVisibility] = React__default.useState(false);
    React__default.useEffect(() => {
        const handleScroll = () => {
            const currentScrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
            if (currentScrollPosition > 280) {
                setVisibility(true);
            }
            else {
                setVisibility(false);
            }
        };
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);
    const handleClick = () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };
    return (jsx(ScrollToTopButton, Object.assign({ visible: isVisible, onClick: handleClick }, { children: jsx(ArrowUpward, {}) })));
};

export { ScrollToTop as default };
//# sourceMappingURL=ScrollToTopButton.js.map