|
| 1 | +import React, { useEffect, createContext, useCallback } from 'react'; |
| 2 | + |
| 3 | +// Extend the Window interface to include the Clarity function |
| 4 | +declare global { |
| 5 | + interface Window { |
| 6 | + clarity?: (...args: any[]) => void; |
| 7 | + } |
| 8 | +} |
| 9 | + |
| 10 | +const CLARITY_PROJECT_ID = import.meta.env.VITE_REACT_APP_CLARITY_PROJECT_ID as string | undefined; |
| 11 | + |
| 12 | +export type ClarityFn = (...args: any[]) => void; |
| 13 | + |
| 14 | +export const ClarityContext = createContext<ClarityFn | undefined>(undefined); |
| 15 | + |
| 16 | +/** |
| 17 | + * ClarityProvider component |
| 18 | + * |
| 19 | + * Injects the Clarity script on mount and provides the Clarity function via context. |
| 20 | + */ |
| 21 | +const ClarityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { |
| 22 | + useEffect(() => { |
| 23 | + // Inject the Clarity script only once, if not already present |
| 24 | + if (typeof window !== 'undefined' && !window.clarity && CLARITY_PROJECT_ID) { |
| 25 | + (function (c: any, l: Document, a: string, r: string, i: string) { |
| 26 | + c[a] = |
| 27 | + c[a] || |
| 28 | + function (...args: any[]) { |
| 29 | + (c[a].q = c[a].q || []).push(args); |
| 30 | + }; |
| 31 | + const t = l.createElement(r) as HTMLScriptElement; |
| 32 | + t.async = true; |
| 33 | + t.src = 'https://www.clarity.ms/tag/' + i; |
| 34 | + const [y] = l.getElementsByTagName(r); |
| 35 | + if (y && y.parentNode) { |
| 36 | + y.parentNode.insertBefore(t, y); |
| 37 | + } |
| 38 | + })(window, document, 'clarity', 'script', CLARITY_PROJECT_ID); |
| 39 | + } |
| 40 | + }, []); |
| 41 | + |
| 42 | + // Memoized clarity function that calls window.clarity if available |
| 43 | + const clarity = useCallback<ClarityFn>((...args) => { |
| 44 | + if (typeof window !== 'undefined' && typeof window.clarity === 'function') { |
| 45 | + window.clarity(...args); |
| 46 | + } |
| 47 | + }, []); |
| 48 | + |
| 49 | + return <ClarityContext.Provider value={clarity}>{children}</ClarityContext.Provider>; |
| 50 | +}; |
| 51 | + |
| 52 | +export default ClarityProvider; |
0 commit comments