1- /*
2- * Microsoft Clarity React Context Provider
3- *
4- * This provider injects the Microsoft Clarity analytics script into your app and exposes
5- * the Clarity API via React context. Use the `useClarity` hook to access the Clarity function
6- * anywhere in your component tree.
7- *
8- * Usage:
9- * import { useClarity } from './ClarityProvider';
10- * const clarity = useClarity();
11- * clarity('set', 'userId', '123'); // Example Clarity API call
12- *
13- * The Clarity project ID is read from VITE_REACT_APP_CLARITY_PROJECT_ID in your environment.
14- */
151import React , { useEffect , createContext , useContext , useCallback } from 'react' ;
162
173// Extend the Window interface to include the Clarity function
@@ -21,13 +7,10 @@ declare global {
217 }
228}
239
24- // Your Microsoft Clarity project ID is read from VITE_REACT_APP_CLARITY_PROJECT_ID
2510const CLARITY_PROJECT_ID = import . meta. env . VITE_REACT_APP_CLARITY_PROJECT_ID as string | undefined ;
2611
27- // Type for the Clarity function
2812type ClarityFn = ( ...args : any [ ] ) => void ;
2913
30- // Create the Clarity context
3114export const ClarityContext = createContext < ClarityFn | undefined > ( undefined ) ;
3215
3316/**
@@ -48,7 +31,6 @@ export const useClarity = () => {
4831 * ClarityProvider component
4932 *
5033 * Injects the Clarity script on mount and provides the Clarity function via context.
51- * Wrap your app with this provider (typically in AppMain.tsx).
5234 */
5335const ClarityProvider : React . FC < { children : React . ReactNode } > = ( { children } ) => {
5436 useEffect ( ( ) => {
0 commit comments