Development
Hooks Reference
Shared React hooks for ads, pixels, and theme state.
All shared hooks live in components/hooks/. Use these instead of inline implementations.
| Hook | File | Returns | Purpose |
|---|
useAdThemeTiming | useAdThemeTiming.js | isAdEnabled, shouldRender | Theme-based ad enable/timing gates |
useAdDelays | useAdDelays.js | Delay values per ad type | Ad delay calculation |
useAdWaterfall | useAdWaterfall.js | KV cycling state | Ad waterfall with KV value cycling |
useDisplayAdPlacement | useDisplayAdPlacement.js | Portal ref | Auto-placement portal for DisplayAd |
useUniqueAdId | useUniqueAdId.js | Stable ID string | Unique ID for ad containers |
useKv2Popup | useKv2Popup.js | Popup state | KV2 inline popup state management |
useBannerAdLoader | useBannerAdLoader.js | Load state | Questionnaire banner ad loading |
| Hook | File | Purpose |
|---|
useCategoryPixels | useCategoryPixels.js | Category page pixel firing effects |
useConversionPixels | useConversionPixels.js | Conversion pixel state and firing |
useButtonClickHandlers | useButtonClickHandlers.js | Button click with conversion tracking |
| Hook | File | Purpose |
|---|
useQuestionnaireSteps | useQuestionnaireSteps.js | Questionnaire step navigation |
useContentBlur | useContentBlur.js | Blur effect on content containers |
useScreenSize | useScreenSize.js | isLargeScreen, isDesktop detection |
| Hook | File | Purpose |
|---|
useWhatsAppTheme | whatsapp/useWhatsAppTheme.js | Fetch theme data from API |
useWhatsAppMessages | whatsapp/useWhatsAppMessages.js | Message flow and state |
useWhatsAppAdHandlers | whatsapp/useWhatsAppAdHandlers.js | Ad callbacks and redirects |
import useAdThemeTiming from "@/components/hooks/useAdThemeTiming";
import { AD_TYPES } from "@/components/utils/themeConfig";
const { isAdEnabled, shouldRender } = useAdThemeTiming(
AD_TYPES.DISPLAY,
themeType,
{ themeClosed, contentVisible, rewardedAdTriggered }
);