design-react-kit
Version:
Componenti React per Bootstrap 5
22 lines • 1.16 kB
JavaScript
import React, { useLayoutEffect, useState } from 'react';
import { Icon } from '../Icon/Icon';
import classNames from 'classnames';
const backToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
export const BackToTop = ({ ariaLabel = 'Torna su', className, dark = false, small = false, shadow = false, showOffset = 200 }) => {
const [showBtn, setShowBtn] = useState(false);
useLayoutEffect(() => {
window.addEventListener('scroll', () => {
if (window.scrollY > showOffset) {
setShowBtn(true);
}
else {
setShowBtn(false);
}
});
}, [showOffset]);
return (React.createElement("a", { "aria-label": ariaLabel, href: "#", className: classNames(className, 'back-to-top', small && 'back-to-top-small', showBtn && 'back-to-top-show', dark && 'dark', shadow && 'shadow'), id: 'back-to-top-btn', onClick: backToTop, style: { padding: 0 }, color: !dark ? 'primary' : '' },
React.createElement(Icon, { color: dark ? 'secondary' : 'light', icon: 'it-arrow-up', style: { cursor: 'pointer' } })));
};
//# sourceMappingURL=BackToTop.js.map