components.layout.common.StickyBannerLayout.tsx Maven / Gradle / Ivy
import { Box, SxProps } from "@mui/material"
import { ReactElement, useEffect, useRef, useState } from "react"
import { AnyReactElement, DivProps, ReactChildren } from "types/react"
import Types from "types/types"
type BannerProps = {
banner: React.ReactNode,
bodySx?: SxProps
}
interface TransparentBannerProps extends BannerProps {
children: ReactChildren
}
const StickyBannerLayout = ({children, banner, bodySx}: TransparentBannerProps): JSX.Element => {
return (
{banner}
{children}
)
}
const StickyBanner = ({children}: DivProps) => {
const [isSticky, setIsSticky] = useState(false)
const ref = useRef()
// mount
useEffect(()=>{
const cachedRef: Element = Types.as(ref.current),
observer = new IntersectionObserver(
([e]) => setIsSticky(e.intersectionRatio < 1),
{
threshold: [1],
// rootMargin: '-1px 0px 0px 0px', // alternativly, use this and set `top:0` in the CSS
}
)
observer.observe(cachedRef)
// unmount
return function(){
observer.unobserve(cachedRef)
}
}, [])
return (
{children}
)
}
export default StickyBannerLayout