@jwiedeman/gtm-kit-react 1.0.1

package/README.md

@@ -0,0 +1,276 @@
+# @react-gtm-kit/react-modern
+
+[![CI](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml)
+[![Coverage](https://codecov.io/gh/jwiedeman/react-gtm-kit/graph/badge.svg?flag=react-modern)](https://codecov.io/gh/jwiedeman/react-gtm-kit)
+[![npm version](https://img.shields.io/npm/v/@react-gtm-kit/react-modern.svg)](https://www.npmjs.com/package/@react-gtm-kit/react-modern)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@react-gtm-kit/react-modern)](https://bundlephobia.com/package/@react-gtm-kit/react-modern)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![React](https://img.shields.io/badge/React-16.8+-61DAFB.svg?logo=react)](https://reactjs.org/)
+
+**React hooks and provider for Google Tag Manager. StrictMode-safe. Zero double-fires.**
+
+The modern React adapter for GTM Kit - uses hooks and Context API for clean, idiomatic React code.
+
+---
+
+## Installation
+
+```bash
+npm install @react-gtm-kit/core @react-gtm-kit/react-modern
+```
+
+```bash
+yarn add @react-gtm-kit/core @react-gtm-kit/react-modern
+```
+
+```bash
+pnpm add @react-gtm-kit/core @react-gtm-kit/react-modern
+```
+
+---
+
+## Quick Start
+
+### Step 1: Wrap Your App
+
+```tsx
+// App.tsx or index.tsx
+import { GtmProvider } from '@react-gtm-kit/react-modern';
+
+function App() {
+  return (
+    <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
+      <YourApp />
+    </GtmProvider>
+  );
+}
+```
+
+### Step 2: Push Events
+
+```tsx
+import { useGtmPush } from '@react-gtm-kit/react-modern';
+
+function BuyButton() {
+  const push = useGtmPush();
+
+  const handleClick = () => {
+    push({ event: 'purchase', value: 49.99 });
+  };
+
+  return <button onClick={handleClick}>Buy Now</button>;
+}
+```
+
+**That's it!** GTM is now running.
+
+---
+
+## Features
+
+| Feature             | Description                               |
+| ------------------- | ----------------------------------------- |
+| **StrictMode-Safe** | No double-fires in React development mode |
+| **Hooks-Based**     | Modern React patterns with Context API    |
+| **React 16.8+**     | Works with any modern React version       |
+| **TypeScript**      | Full type definitions included            |
+| **Consent Mode v2** | Built-in GDPR compliance hooks            |
+| **SSR Compatible**  | Safe for Next.js, Remix, etc.             |
+
+---
+
+## Available Hooks
+
+### `useGtmPush()`
+
+Get a push function to send events to GTM.
+
+```tsx
+const push = useGtmPush();
+
+push({ event: 'button_click', button_id: 'cta-main' });
+```
+
+### `useGtm()`
+
+Get the full GTM context with all methods.
+
+```tsx
+const { client, push, updateConsent, setConsentDefaults } = useGtm();
+```
+
+### `useGtmConsent()`
+
+Manage consent state.
+
+```tsx
+const { updateConsent, setConsentDefaults } = useGtmConsent();
+
+// After user accepts cookies
+updateConsent({
+  ad_storage: 'granted',
+  analytics_storage: 'granted'
+});
+```
+
+### `useGtmClient()`
+
+Get the raw GTM client instance.
+
+```tsx
+const client = useGtmClient();
+```
+
+### `useGtmReady()`
+
+Get a function that resolves when GTM is fully loaded.
+
+```tsx
+const whenReady = useGtmReady();
+
+useEffect(() => {
+  whenReady().then(() => {
+    console.log('GTM is ready!');
+  });
+}, [whenReady]);
+```
+
+---
+
+## Consent Mode v2 (GDPR)
+
+```tsx
+import { GtmProvider, useGtmConsent } from '@react-gtm-kit/react-modern';
+import { consentPresets } from '@react-gtm-kit/core';
+
+// Set defaults BEFORE GTM loads
+<GtmProvider
+  config={{ containers: 'GTM-XXXXXX' }}
+  onBeforeInit={(client) => {
+    client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+  }}
+>
+  <App />
+</GtmProvider>;
+
+// In your cookie banner
+function CookieBanner() {
+  const { updateConsent } = useGtmConsent();
+
+  // Accept all tracking
+  const acceptAll = () => updateConsent(consentPresets.allGranted);
+
+  // Reject all tracking
+  const rejectAll = () => updateConsent(consentPresets.eeaDefault);
+
+  // Analytics only (mixed consent)
+  const analyticsOnly = () => updateConsent(consentPresets.analyticsOnly);
+
+  // Granular: update specific categories
+  const customChoice = () =>
+    updateConsent({
+      analytics_storage: 'granted',
+      ad_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied'
+    });
+
+  return (
+    <div>
+      <button onClick={acceptAll}>Accept All</button>
+      <button onClick={rejectAll}>Reject All</button>
+      <button onClick={analyticsOnly}>Analytics Only</button>
+    </div>
+  );
+}
+```
+
+**Partial Updates** - Only update what changed:
+
+```tsx
+// User later opts into ads from preference center
+updateConsent({ ad_storage: 'granted', ad_user_data: 'granted' });
+// Other categories (analytics_storage, ad_personalization) unchanged
+```
+
+---
+
+## Provider Options
+
+```tsx
+<GtmProvider
+  config={{
+    containers: 'GTM-XXXXXX', // Required
+    dataLayerName: 'dataLayer', // Optional
+    host: 'https://custom.host.com', // Optional
+    scriptAttributes: { nonce: '...' } // Optional: CSP
+  }}
+  onBeforeInit={(client) => {
+    // Called before GTM initializes
+    // Perfect for consent defaults
+  }}
+  onAfterInit={(client) => {
+    // Called after GTM initializes
+  }}
+>
+  {children}
+</GtmProvider>
+```
+
+---
+
+## React Router Integration
+
+```tsx
+import { useLocation } from 'react-router-dom';
+import { useGtmPush } from '@react-gtm-kit/react-modern';
+import { useEffect, useRef } from 'react';
+
+function PageTracker() {
+  const location = useLocation();
+  const push = useGtmPush();
+  const lastPath = useRef('');
+
+  useEffect(() => {
+    const path = location.pathname + location.search;
+    if (path !== lastPath.current) {
+      lastPath.current = path;
+      push({ event: 'page_view', page_path: path });
+    }
+  }, [location, push]);
+
+  return null;
+}
+
+// Add to your app
+function App() {
+  return (
+    <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>
+      <BrowserRouter>
+        <PageTracker />
+        <Routes>...</Routes>
+      </BrowserRouter>
+    </GtmProvider>
+  );
+}
+```
+
+---
+
+## Why StrictMode-Safe Matters
+
+In React development mode with StrictMode, components mount twice. This causes most GTM libraries to fire events twice. **GTM Kit handles this automatically** - you get exactly one initialization and no duplicate events.
+
+---
+
+## Requirements
+
+- React 16.8+ (hooks support)
+- `@react-gtm-kit/core` (peer dependency)
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var react = require('react');
+var gtmKit = require('@jwiedeman/gtm-kit');
+var jsxRuntime = require('react/jsx-runtime');
+
+var u=react.createContext(null),d=(t,n)=>{process.env.NODE_ENV!=="production"&&t!==n&&console.warn("[react-gtm-kit] GtmProvider received new configuration; reconfiguration after mount is not supported. The initial configuration will continue to be used.");},G=t=>{let n=react.useRef(),e=react.useRef();return n.current?e.current&&d(e.current,t):(n.current=gtmKit.createGtmClient(t),e.current=t),n.current},f=({config:t,children:n})=>{let e=G(t);react.useEffect(()=>(e.init(),()=>{e.teardown();}),[e]);let p=react.useMemo(()=>({client:e,push:o=>e.push(o),setConsentDefaults:(o,r)=>e.setConsentDefaults(o,r),updateConsent:(o,r)=>e.updateConsent(o,r),whenReady:()=>e.whenReady(),onReady:o=>e.onReady(o)}),[e]);return jsxRuntime.jsx(u.Provider,{value:p,children:n})},s=()=>{let t=react.useContext(u);if(!t)throw new Error("useGtm hook must be used within a GtmProvider instance.");return t},v=s,x=()=>s().client,y=()=>s().push,h=()=>{let{setConsentDefaults:t,updateConsent:n}=s();return react.useMemo(()=>({setConsentDefaults:t,updateConsent:n}),[t,n])},P=()=>{let{whenReady:t}=s();return t};
+
+exports.GtmProvider = f;
+exports.useGtm = v;
+exports.useGtmClient = x;
+exports.useGtmConsent = h;
+exports.useGtmPush = y;
+exports.useGtmReady = P;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx"],"names":["createContext","useContext","useEffect","useMemo","useRef","createGtmClient","jsx","GtmContext","warnOnConfigChange","initialConfig","nextConfig","useStableClient","config","clientRef","configRef","GtmProvider","children","client","value","state","options","callback","useGtmContext","context","useGtm","useGtmClient","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmReady","whenReady"],"mappings":"AAAA,OAAS,iBAAAA,EAAe,cAAAC,EAAY,aAAAC,EAAW,WAAAC,EAAS,UAAAC,MAAgD,QACxG,OACE,mBAAAC,MAOK,qBAmEE,cAAAC,MAAA,oBA/CT,IAAMC,EAAaP,EAAsC,IAAI,EAEvDQ,EAAqB,CAACC,EAAuCC,IAA6C,CAC1G,QAAQ,IAAI,WAAa,cAAgBD,IAAkBC,GAC7D,QAAQ,KACN,2JAEF,CAEJ,EAEMC,EAAmBC,GAA8C,CACrE,IAAMC,EAAYT,EAAkB,EAC9BU,EAAYV,EAA+B,EAEjD,OAAKS,EAAU,QAGJC,EAAU,SACnBN,EAAmBM,EAAU,QAASF,CAAM,GAH5CC,EAAU,QAAUR,EAAgBO,CAAM,EAC1CE,EAAU,QAAUF,GAKfC,EAAU,OACnB,EAEaE,EAAc,CAAC,CAAE,OAAAH,EAAQ,SAAAI,CAAS,IAAqC,CAClF,IAAMC,EAASN,EAAgBC,CAAM,EAErCV,EAAU,KACRe,EAAO,KAAK,EACL,IAAM,CACXA,EAAO,SAAS,CAClB,GACC,CAACA,CAAM,CAAC,EAEX,IAAMC,EAAQf,EACZ,KAAO,CACL,OAAAc,EACA,KAAOC,GAAUD,EAAO,KAAKC,CAAK,EAClC,mBAAoB,CAACC,EAAOC,IAAYH,EAAO,mBAAmBE,EAAOC,CAAO,EAChF,cAAe,CAACD,EAAOC,IAAYH,EAAO,cAAcE,EAAOC,CAAO,EACtE,UAAW,IAAMH,EAAO,UAAU,EAClC,QAAUI,GAAaJ,EAAO,QAAQI,CAAQ,CAChD,GACA,CAACJ,CAAM,CACT,EAEA,OAAOX,EAACC,EAAW,SAAX,CAAoB,MAAOW,EAAQ,SAAAF,EAAS,CACtD,EAEMM,EAAgB,IAAuB,CAC3C,IAAMC,EAAUtB,EAAWM,CAAU,EACrC,GAAI,CAACgB,EACH,MAAM,IAAI,MAAM,yDAAyD,EAE3E,OAAOA,CACT,EAEaC,EAASF,EAETG,EAAe,IACnBH,EAAc,EAAE,OAGZI,EAAa,IACjBJ,EAAc,EAAE,KAGZK,EAAgB,IAAqB,CAChD,GAAM,CAAE,mBAAAC,EAAoB,cAAAC,CAAc,EAAIP,EAAc,EAC5D,OAAOnB,EAAQ,KAAO,CAAE,mBAAAyB,EAAoB,cAAAC,CAAc,GAAI,CAACD,EAAoBC,CAAa,CAAC,CACnG,EAEaC,EAAc,IAA0C,CACnE,GAAM,CAAE,UAAAC,CAAU,EAAIT,EAAc,EACpC,OAAOS,CACT","sourcesContent":["import { createContext, useContext, useEffect, useMemo, useRef, type PropsWithChildren, type JSX } from 'react';\nimport {\n  createGtmClient,\n  type ConsentRegionOptions,\n  type ConsentState,\n  type CreateGtmClientOptions,\n  type DataLayerValue,\n  type GtmClient,\n  type ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\nexport interface GtmProviderProps extends PropsWithChildren {\n  config: CreateGtmClientOptions;\n}\n\nexport interface GtmContextValue {\n  client: GtmClient;\n  push: (value: DataLayerValue) => void;\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  whenReady: () => Promise<ScriptLoadState[]>;\n  onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;\n}\n\nexport interface GtmConsentApi {\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\nconst GtmContext = createContext<GtmContextValue | null>(null);\n\nconst warnOnConfigChange = (initialConfig: CreateGtmClientOptions, nextConfig: CreateGtmClientOptions): void => {\n  if (process.env.NODE_ENV !== 'production' && initialConfig !== nextConfig) {\n    console.warn(\n      '[react-gtm-kit] GtmProvider received new configuration; reconfiguration after mount is not supported. ' +\n        'The initial configuration will continue to be used.'\n    );\n  }\n};\n\nconst useStableClient = (config: CreateGtmClientOptions): GtmClient => {\n  const clientRef = useRef<GtmClient>();\n  const configRef = useRef<CreateGtmClientOptions>();\n\n  if (!clientRef.current) {\n    clientRef.current = createGtmClient(config);\n    configRef.current = config;\n  } else if (configRef.current) {\n    warnOnConfigChange(configRef.current, config);\n  }\n\n  return clientRef.current!;\n};\n\nexport const GtmProvider = ({ config, children }: GtmProviderProps): JSX.Element => {\n  const client = useStableClient(config);\n\n  useEffect(() => {\n    client.init();\n    return () => {\n      client.teardown();\n    };\n  }, [client]);\n\n  const value = useMemo<GtmContextValue>(\n    () => ({\n      client,\n      push: (value) => client.push(value),\n      setConsentDefaults: (state, options) => client.setConsentDefaults(state, options),\n      updateConsent: (state, options) => client.updateConsent(state, options),\n      whenReady: () => client.whenReady(),\n      onReady: (callback) => client.onReady(callback)\n    }),\n    [client]\n  );\n\n  return <GtmContext.Provider value={value}>{children}</GtmContext.Provider>;\n};\n\nconst useGtmContext = (): GtmContextValue => {\n  const context = useContext(GtmContext);\n  if (!context) {\n    throw new Error('useGtm hook must be used within a GtmProvider instance.');\n  }\n  return context;\n};\n\nexport const useGtm = useGtmContext;\n\nexport const useGtmClient = (): GtmClient => {\n  return useGtmContext().client;\n};\n\nexport const useGtmPush = (): ((value: DataLayerValue) => void) => {\n  return useGtmContext().push;\n};\n\nexport const useGtmConsent = (): GtmConsentApi => {\n  const { setConsentDefaults, updateConsent } = useGtmContext();\n  return useMemo(() => ({ setConsentDefaults, updateConsent }), [setConsentDefaults, updateConsent]);\n};\n\nexport const useGtmReady = (): (() => Promise<ScriptLoadState[]>) => {\n  const { whenReady } = useGtmContext();\n  return whenReady;\n};\n"]}

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import { PropsWithChildren, JSX } from 'react';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState } from '@jwiedeman/gtm-kit';
+
+interface GtmProviderProps extends PropsWithChildren {
+    config: CreateGtmClientOptions;
+}
+interface GtmContextValue {
+    client: GtmClient;
+    push: (value: DataLayerValue) => void;
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    whenReady: () => Promise<ScriptLoadState[]>;
+    onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;
+}
+interface GtmConsentApi {
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+declare const GtmProvider: ({ config, children }: GtmProviderProps) => JSX.Element;
+declare const useGtm: () => GtmContextValue;
+declare const useGtmClient: () => GtmClient;
+declare const useGtmPush: () => ((value: DataLayerValue) => void);
+declare const useGtmConsent: () => GtmConsentApi;
+declare const useGtmReady: () => (() => Promise<ScriptLoadState[]>);
+
+export { GtmConsentApi, GtmContextValue, GtmProvider, GtmProviderProps, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren, JSX } from 'react';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState } from '@jwiedeman/gtm-kit';
+
+interface GtmProviderProps extends PropsWithChildren {
+    config: CreateGtmClientOptions;
+}
+interface GtmContextValue {
+    client: GtmClient;
+    push: (value: DataLayerValue) => void;
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    whenReady: () => Promise<ScriptLoadState[]>;
+    onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;
+}
+interface GtmConsentApi {
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+declare const GtmProvider: ({ config, children }: GtmProviderProps) => JSX.Element;
+declare const useGtm: () => GtmContextValue;
+declare const useGtmClient: () => GtmClient;
+declare const useGtmPush: () => ((value: DataLayerValue) => void);
+declare const useGtmConsent: () => GtmConsentApi;
+declare const useGtmReady: () => (() => Promise<ScriptLoadState[]>);
+
+export { GtmConsentApi, GtmContextValue, GtmProvider, GtmProviderProps, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { createContext, useEffect, useMemo, useRef, useContext } from 'react';
+import { createGtmClient } from '@jwiedeman/gtm-kit';
+import { jsx } from 'react/jsx-runtime';
+
+var u=createContext(null),d=(t,n)=>{process.env.NODE_ENV!=="production"&&t!==n&&console.warn("[react-gtm-kit] GtmProvider received new configuration; reconfiguration after mount is not supported. The initial configuration will continue to be used.");},G=t=>{let n=useRef(),e=useRef();return n.current?e.current&&d(e.current,t):(n.current=createGtmClient(t),e.current=t),n.current},f=({config:t,children:n})=>{let e=G(t);useEffect(()=>(e.init(),()=>{e.teardown();}),[e]);let p=useMemo(()=>({client:e,push:o=>e.push(o),setConsentDefaults:(o,r)=>e.setConsentDefaults(o,r),updateConsent:(o,r)=>e.updateConsent(o,r),whenReady:()=>e.whenReady(),onReady:o=>e.onReady(o)}),[e]);return jsx(u.Provider,{value:p,children:n})},s=()=>{let t=useContext(u);if(!t)throw new Error("useGtm hook must be used within a GtmProvider instance.");return t},v=s,x=()=>s().client,y=()=>s().push,h=()=>{let{setConsentDefaults:t,updateConsent:n}=s();return useMemo(()=>({setConsentDefaults:t,updateConsent:n}),[t,n])},P=()=>{let{whenReady:t}=s();return t};
+
+export { f as GtmProvider, v as useGtm, x as useGtmClient, h as useGtmConsent, y as useGtmPush, P as useGtmReady };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx"],"names":["createContext","useContext","useEffect","useMemo","useRef","createGtmClient","jsx","GtmContext","warnOnConfigChange","initialConfig","nextConfig","useStableClient","config","clientRef","configRef","GtmProvider","children","client","value","state","options","callback","useGtmContext","context","useGtm","useGtmClient","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmReady","whenReady"],"mappings":"AAAA,OAAS,iBAAAA,EAAe,cAAAC,EAAY,aAAAC,EAAW,WAAAC,EAAS,UAAAC,MAAgD,QACxG,OACE,mBAAAC,MAOK,qBAmEE,cAAAC,MAAA,oBA/CT,IAAMC,EAAaP,EAAsC,IAAI,EAEvDQ,EAAqB,CAACC,EAAuCC,IAA6C,CAC1G,QAAQ,IAAI,WAAa,cAAgBD,IAAkBC,GAC7D,QAAQ,KACN,2JAEF,CAEJ,EAEMC,EAAmBC,GAA8C,CACrE,IAAMC,EAAYT,EAAkB,EAC9BU,EAAYV,EAA+B,EAEjD,OAAKS,EAAU,QAGJC,EAAU,SACnBN,EAAmBM,EAAU,QAASF,CAAM,GAH5CC,EAAU,QAAUR,EAAgBO,CAAM,EAC1CE,EAAU,QAAUF,GAKfC,EAAU,OACnB,EAEaE,EAAc,CAAC,CAAE,OAAAH,EAAQ,SAAAI,CAAS,IAAqC,CAClF,IAAMC,EAASN,EAAgBC,CAAM,EAErCV,EAAU,KACRe,EAAO,KAAK,EACL,IAAM,CACXA,EAAO,SAAS,CAClB,GACC,CAACA,CAAM,CAAC,EAEX,IAAMC,EAAQf,EACZ,KAAO,CACL,OAAAc,EACA,KAAOC,GAAUD,EAAO,KAAKC,CAAK,EAClC,mBAAoB,CAACC,EAAOC,IAAYH,EAAO,mBAAmBE,EAAOC,CAAO,EAChF,cAAe,CAACD,EAAOC,IAAYH,EAAO,cAAcE,EAAOC,CAAO,EACtE,UAAW,IAAMH,EAAO,UAAU,EAClC,QAAUI,GAAaJ,EAAO,QAAQI,CAAQ,CAChD,GACA,CAACJ,CAAM,CACT,EAEA,OAAOX,EAACC,EAAW,SAAX,CAAoB,MAAOW,EAAQ,SAAAF,EAAS,CACtD,EAEMM,EAAgB,IAAuB,CAC3C,IAAMC,EAAUtB,EAAWM,CAAU,EACrC,GAAI,CAACgB,EACH,MAAM,IAAI,MAAM,yDAAyD,EAE3E,OAAOA,CACT,EAEaC,EAASF,EAETG,EAAe,IACnBH,EAAc,EAAE,OAGZI,EAAa,IACjBJ,EAAc,EAAE,KAGZK,EAAgB,IAAqB,CAChD,GAAM,CAAE,mBAAAC,EAAoB,cAAAC,CAAc,EAAIP,EAAc,EAC5D,OAAOnB,EAAQ,KAAO,CAAE,mBAAAyB,EAAoB,cAAAC,CAAc,GAAI,CAACD,EAAoBC,CAAa,CAAC,CACnG,EAEaC,EAAc,IAA0C,CACnE,GAAM,CAAE,UAAAC,CAAU,EAAIT,EAAc,EACpC,OAAOS,CACT","sourcesContent":["import { createContext, useContext, useEffect, useMemo, useRef, type PropsWithChildren, type JSX } from 'react';\nimport {\n  createGtmClient,\n  type ConsentRegionOptions,\n  type ConsentState,\n  type CreateGtmClientOptions,\n  type DataLayerValue,\n  type GtmClient,\n  type ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\nexport interface GtmProviderProps extends PropsWithChildren {\n  config: CreateGtmClientOptions;\n}\n\nexport interface GtmContextValue {\n  client: GtmClient;\n  push: (value: DataLayerValue) => void;\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  whenReady: () => Promise<ScriptLoadState[]>;\n  onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;\n}\n\nexport interface GtmConsentApi {\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\nconst GtmContext = createContext<GtmContextValue | null>(null);\n\nconst warnOnConfigChange = (initialConfig: CreateGtmClientOptions, nextConfig: CreateGtmClientOptions): void => {\n  if (process.env.NODE_ENV !== 'production' && initialConfig !== nextConfig) {\n    console.warn(\n      '[react-gtm-kit] GtmProvider received new configuration; reconfiguration after mount is not supported. ' +\n        'The initial configuration will continue to be used.'\n    );\n  }\n};\n\nconst useStableClient = (config: CreateGtmClientOptions): GtmClient => {\n  const clientRef = useRef<GtmClient>();\n  const configRef = useRef<CreateGtmClientOptions>();\n\n  if (!clientRef.current) {\n    clientRef.current = createGtmClient(config);\n    configRef.current = config;\n  } else if (configRef.current) {\n    warnOnConfigChange(configRef.current, config);\n  }\n\n  return clientRef.current!;\n};\n\nexport const GtmProvider = ({ config, children }: GtmProviderProps): JSX.Element => {\n  const client = useStableClient(config);\n\n  useEffect(() => {\n    client.init();\n    return () => {\n      client.teardown();\n    };\n  }, [client]);\n\n  const value = useMemo<GtmContextValue>(\n    () => ({\n      client,\n      push: (value) => client.push(value),\n      setConsentDefaults: (state, options) => client.setConsentDefaults(state, options),\n      updateConsent: (state, options) => client.updateConsent(state, options),\n      whenReady: () => client.whenReady(),\n      onReady: (callback) => client.onReady(callback)\n    }),\n    [client]\n  );\n\n  return <GtmContext.Provider value={value}>{children}</GtmContext.Provider>;\n};\n\nconst useGtmContext = (): GtmContextValue => {\n  const context = useContext(GtmContext);\n  if (!context) {\n    throw new Error('useGtm hook must be used within a GtmProvider instance.');\n  }\n  return context;\n};\n\nexport const useGtm = useGtmContext;\n\nexport const useGtmClient = (): GtmClient => {\n  return useGtmContext().client;\n};\n\nexport const useGtmPush = (): ((value: DataLayerValue) => void) => {\n  return useGtmContext().push;\n};\n\nexport const useGtmConsent = (): GtmConsentApi => {\n  const { setConsentDefaults, updateConsent } = useGtmContext();\n  return useMemo(() => ({ setConsentDefaults, updateConsent }), [setConsentDefaults, updateConsent]);\n};\n\nexport const useGtmReady = (): (() => Promise<ScriptLoadState[]>) => {\n  const { whenReady } = useGtmContext();\n  return whenReady;\n};\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@jwiedeman/gtm-kit-react",
+  "version": "1.0.1",
+  "description": "React hooks and provider for GTM Kit - Google Tag Manager integration.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jwiedeman/GTM-Kit.git",
+    "directory": "packages/react-modern"
+  },
+  "author": "jwiedeman",
+  "keywords": [
+    "gtm",
+    "google-tag-manager",
+    "react",
+    "hooks"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "lint": "eslint --max-warnings=0 \"src/**/*.{ts,tsx}\"",
+    "test": "jest --config ./jest.config.cjs --runInBand",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@jwiedeman/gtm-kit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "tslib": "^2.6.2"
+  }
+}