lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
38 lines • 2.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const utils_1 = require("@/components/lib/utils"); // Assuming you have a utility for class name concatenation
const react_1 = require("react"); // Import useState and useEffect
const TopStickyBar = ({ show: externalShow = false, // Renamed to avoid conflict with internal state
showOnScroll = false, scrollThreshold = 200, children, className, duration = 0.4, ease = "easeInOut", initialY = -50, visibleY = 0, hiddenY = -50, }) => {
const [internalShow, setInternalShow] = (0, react_1.useState)(externalShow); // Initialize with externalShow
// Effect to manage scroll-based visibility
(0, react_1.useEffect)(() => {
if (!showOnScroll) {
setInternalShow(externalShow); // If not scroll-controlled, use external prop
return;
}
const handleScroll = () => {
if (window.scrollY > scrollThreshold) {
setInternalShow(true);
}
else {
setInternalShow(false);
}
};
window.addEventListener("scroll", handleScroll);
// Call once on mount to set initial state based on current scroll
handleScroll();
return () => window.
removeEventListener("scroll", handleScroll);
}, [showOnScroll, scrollThreshold, externalShow]); // Re-run if these props change
// Determine the final `show` value
const finalShow = showOnScroll ? internalShow : externalShow;
return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { y: initialY, opacity: 0 }, animate: {
y: finalShow ? visibleY : hiddenY,
opacity: finalShow ? 1 : 0,
}, transition: { duration, ease }, className: (0, utils_1.cn)("fixed top-0 left-0 w-full z-[60] bg-gray-800 text-white py-1 text-sm text-center shadow-md", className), children: children }));
};
exports.default = TopStickyBar;
//# sourceMappingURL=top-sticky-bar.js.map