\r\n {props.Content.Heading}
\r\n \r\n {props.Content.EntryHeading && (\r\n
{props.Content.EntryHeading}
\r\n )}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n {props.Content.IntroHeading && (\r\n
{props.Content.IntroHeading}
\r\n )}\r\n 1\r\n ? props.Content.IntroContent[0]\r\n : props.Content.IntroContent\r\n }\r\n propertyName=\"IntroContent\"\r\n currentPageProps={props}\r\n >\r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n {props.Content.SectionHeading && (\r\n
{props.Content.SectionHeading}
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default withRouter(StartPage);","import React, { useRef, useState, useEffect } from 'react';\r\n\r\nconst Container = (WrappedComponent, offsetTop) => {\r\n const handles = [];\r\n const printHandler = [];\r\n let ticking = false;\r\n const throttleScroll = () => {\r\n ticking =\r\n ticking ||\r\n requestAnimationFrame(() => {\r\n ticking = false;\r\n handles.map((handle) => handle());\r\n });\r\n };\r\n\r\n if (typeof window !== 'undefined') {\r\n window.addEventListener('scroll', throttleScroll, false);\r\n\r\n window.addEventListener('resize', throttleScroll, false);\r\n\r\n const mediaQueryList = window.matchMedia('print');\r\n mediaQueryList.addListener((mql) => {\r\n if (mql.matches) {\r\n printHandler.map((handle) => handle());\r\n }\r\n });\r\n }\r\n return (props) => {\r\n const viewport = useRef();\r\n const [isInViewPort, setIsInViewPort] = useState(false);\r\n const [isViewed, setIsViewed] = useState(false);\r\n const [isBrowserTop, setIsBrowserTop] = useState(false);\r\n const [isBottomBrowserTop, setIsBottomBrowserTop] = useState(null);\r\n const [isInRange, setIsInRange] = useState(false);\r\n\r\n const getBoundingClientRect = () => {\r\n return viewport.current.getBoundingClientRect();\r\n };\r\n\r\n const isComponentInViewPort = () => {\r\n requestAnimationFrame(() => {\r\n if (!viewport.current) return;\r\n\r\n const rect = getBoundingClientRect();\r\n const offset = offsetTop ? offsetTop : 0;\r\n\r\n if (rect.top - (window.innerHeight + offset) <= 0) {\r\n if (!isInViewPort) {\r\n setIsInViewPort(true);\r\n setIsViewed(true);\r\n }\r\n } else {\r\n isInViewPort && setIsInViewPort(false);\r\n }\r\n });\r\n };\r\n\r\n const isComponentBrowserTop = () => {\r\n if (!viewport.current) return;\r\n\r\n const rect = getBoundingClientRect();\r\n if (rect.top < 1) {\r\n !isBrowserTop && setIsBrowserTop(true);\r\n } else {\r\n isBrowserTop && setIsBrowserTop(false);\r\n }\r\n };\r\n\r\n const isComponentBottomBrowserTop = () => {\r\n if (!viewport.current) return;\r\n\r\n const rect = getBoundingClientRect();\r\n if (rect.bottom > 0) {\r\n isBottomBrowserTop === false && setIsBottomBrowserTop(true);\r\n } else {\r\n isBottomBrowserTop !== false && setIsBottomBrowserTop(false);\r\n }\r\n };\r\n\r\n const isComponentWithinRange = () => {\r\n if (!viewport.current) return;\r\n\r\n const rect = getBoundingClientRect();\r\n if (rect.top < 1 && rect.bottom > 0) {\r\n !isInRange && setIsInRange(true);\r\n } else {\r\n isInRange && setIsInRange(false);\r\n }\r\n };\r\n\r\n const isPrinting = () => {\r\n setIsInViewPort(true);\r\n setIsViewed(true);\r\n };\r\n\r\n useEffect(() => {\r\n isComponentInViewPort();\r\n setTimeout(() => {\r\n isComponentInViewPort();\r\n }, 200);\r\n\r\n handles.push(isComponentInViewPort);\r\n handles.push(isComponentBrowserTop);\r\n handles.push(isComponentBottomBrowserTop);\r\n handles.push(isComponentWithinRange);\r\n printHandler.push(isPrinting);\r\n }, [isInRange]);\r\n\r\n return (\r\n \r\n {(!props.isBackgroundImage || props.isViewed || !props.isLazyLoad) && (\r\n
\r\n )}\r\n {props.isLazyLoad && (\r\n
`,\r\n }}\r\n />\r\n )}\r\n