diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx index ba0ab9658d..73ab168d7f 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx @@ -60,16 +60,19 @@ const CampaignsBanner = (props: CampaignsBannerProps) => { const hasText = !!Text; const isButton = action?.isButton; - const { fontSize, ref } = useFitText(campaignBackground, body?.fontSize); + const { fontSize, ref, wrapperRef } = useFitText( + campaignBackground, + body?.fontSize, + ); return ( - + {hasTitle && ( { const ref: React.RefObject = useRef(null); + const wrapperRef: React.RefObject = useRef(null); const [fontSize, setFontSize] = useState(parseInt(currentFontSize, 10)); @@ -40,15 +41,17 @@ const useFitText = ( useEffect(() => { const isOverflow = - !!ref.current && ref.current.scrollHeight > ref.current.offsetHeight; + !!ref.current && + !!wrapperRef.current && + ref.current.scrollHeight > wrapperRef.current.offsetHeight; if (isOverflow) { const newFontSize = fontSize - 1; setFontSize(newFontSize); } - }, [currentFontSize, fontSize, ref?.current?.scrollHeight]); + }, [fontSize]); - return { fontSize: `${fontSize}px`, ref }; + return { fontSize: `${fontSize}px`, ref, wrapperRef }; }; export default useFitText;