@jwiedeman/gtm-kit-react-legacy 1.1.2 → 1.1.4

package/README.md

@@ -1,9 +1,9 @@
-# @react-gtm-kit/react-legacy
+# @jwiedeman/gtm-kit-react-legacy
 
-[![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-legacy)](https://codecov.io/gh/jwiedeman/react-gtm-kit)
-[![npm version](https://img.shields.io/npm/v/@react-gtm-kit/react-legacy.svg)](https://www.npmjs.com/package/@react-gtm-kit/react-legacy)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@react-gtm-kit/react-legacy)](https://bundlephobia.com/package/@react-gtm-kit/react-legacy)
+[![CI](https://github.com/jwiedeman/GTM-Kit/actions/workflows/ci.yml/badge.svg)](https://github.com/jwiedeman/GTM-Kit/actions/workflows/ci.yml)
+[![Coverage](https://codecov.io/gh/jwiedeman/GTM-Kit/graph/badge.svg?flag=react-legacy)](https://codecov.io/gh/jwiedeman/GTM-Kit)
+[![npm version](https://img.shields.io/npm/v/@jwiedeman/gtm-kit-react-legacy.svg)](https://www.npmjs.com/package/@jwiedeman/gtm-kit-react-legacy)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@jwiedeman/gtm-kit-react-legacy)](https://bundlephobia.com/package/@jwiedeman/gtm-kit-react-legacy)
 [![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.0+-61DAFB.svg?logo=react)](https://reactjs.org/)
@@ -17,38 +17,39 @@ The legacy React adapter for GTM Kit - uses HOC pattern for class component comp
 ## Installation
 
 ```bash
-npm install @react-gtm-kit/core @react-gtm-kit/react-legacy
+npm install @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react-legacy
 ```
 
 ```bash
-yarn add @react-gtm-kit/core @react-gtm-kit/react-legacy
+yarn add @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react-legacy
 ```
 
 ```bash
-pnpm add @react-gtm-kit/core @react-gtm-kit/react-legacy
+pnpm add @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react-legacy
 ```
 
 ---
 
 ## When to Use This Package
 
-Use `@react-gtm-kit/react-legacy` if:
+Use `@jwiedeman/gtm-kit-react-legacy` if:
 
 - You're using class components
 - Your project uses React < 16.8 (no hooks)
 - You prefer the HOC pattern
 - You're maintaining a legacy codebase
 
-**For new projects**, we recommend [`@react-gtm-kit/react-modern`](https://www.npmjs.com/package/@react-gtm-kit/react-modern) which uses hooks.
+**For new projects**, we recommend [`@jwiedeman/gtm-kit-react`](https://www.npmjs.com/package/@jwiedeman/gtm-kit-react) which uses hooks.
 
 ---
 
 ## Quick Start
 
-### Step 1: Wrap Your App
+### Step 1: Wrap Your Root Component
 
 ```tsx
-import { withGtm } from '@react-gtm-kit/react-legacy';
+import React from 'react';
+import { withGtm } from '@jwiedeman/gtm-kit-react-legacy';
 
 class App extends React.Component {
   render() {
@@ -56,17 +57,22 @@ class App extends React.Component {
   }
 }
 
-export default withGtm(App, { containers: 'GTM-XXXXXX' });
+// Wrap with GTM - note the curried function pattern
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(App);
 ```
 
-### Step 2: Push Events
+### Step 2: Use the GTM API in Child Components
+
+The `withGtm` HOC injects a `gtm` prop with the full GTM API:
 
 ```tsx
-import { withGtmPush } from '@react-gtm-kit/react-legacy';
+import React from 'react';
+import { withGtm } from '@jwiedeman/gtm-kit-react-legacy';
 
 class BuyButton extends React.Component {
   handleClick = () => {
-    this.props.gtmPush({ event: 'purchase', value: 49.99 });
+    // Access push via the injected gtm prop
+    this.props.gtm.push({ event: 'purchase', value: 49.99 });
   };
 
   render() {
@@ -74,77 +80,124 @@ class BuyButton extends React.Component {
   }
 }
 
-export default withGtmPush(BuyButton);
+// Wrap any component to get the gtm prop
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(BuyButton);
 ```
 
 ---
 
 ## Features
 
-| Feature | Description |
-|---------|-------------|
-| **HOC Pattern** | Works with class components |
-| **React 16.0+** | Compatible with older React versions |
-| **StrictMode-Safe** | No double-fires in development mode |
-| **TypeScript** | Full type definitions included |
-| **Consent Mode v2** | Built-in GDPR compliance support |
+| Feature             | Description                          |
+| ------------------- | ------------------------------------ |
+| **HOC Pattern**     | Works with class components          |
+| **React 16.0+**     | Compatible with older React versions |
+| **StrictMode-Safe** | No double-fires in development mode  |
+| **TypeScript**      | Full type definitions included       |
+| **Consent Mode v2** | Built-in GDPR compliance support     |
 
 ---
 
-## Available HOCs
+## API Reference
 
-### `withGtm(Component, config)`
+### `withGtm(options)(Component)`
 
-Wraps your root component and initializes GTM.
+A curried Higher-Order Component that wraps your component and provides GTM functionality.
 
 ```tsx
-import { withGtm } from '@react-gtm-kit/react-legacy';
+import { withGtm } from '@jwiedeman/gtm-kit-react-legacy';
+
+const WrappedComponent = withGtm({
+  config: {
+    containers: 'GTM-XXXXXX',
+    dataLayerName: 'dataLayer' // optional
+  },
+  propName: 'gtm' // optional, defaults to 'gtm'
+})(YourComponent);
+```
 
-class App extends React.Component {
-  render() {
-    return <div>{this.props.children}</div>;
-  }
-}
+#### Options
 
-export default withGtm(App, {
-  containers: 'GTM-XXXXXX',
-  dataLayerName: 'dataLayer', // optional
-  onBeforeInit: (client) => {
-    // Set consent defaults here
-  }
-});
+| Option     | Type                     | Default  | Description               |
+| ---------- | ------------------------ | -------- | ------------------------- |
+| `config`   | `CreateGtmClientOptions` | Required | GTM client configuration  |
+| `propName` | `string`                 | `'gtm'`  | Name of the injected prop |
+
+#### Injected Props
+
+The wrapped component receives a prop (default name: `gtm`) with the following API:
+
+```typescript
+interface LegacyGtmApi {
+  client: GtmClient; // Raw GTM client
+  push: (value: DataLayerValue) => void; // Push to dataLayer
+  setConsentDefaults: (state, options?) => void; // Set consent defaults
+  updateConsent: (state, options?) => void; // Update consent state
+}
 ```
 
-### `withGtmPush(Component)`
+---
 
-Injects a `gtmPush` prop for pushing events.
+## Usage Examples
 
-```tsx
-import { withGtmPush } from '@react-gtm-kit/react-legacy';
+### Pushing Events
 
+```tsx
 class TrackableButton extends React.Component {
   handleClick = () => {
-    this.props.gtmPush({ event: 'button_click', button_id: 'main-cta' });
+    this.props.gtm.push({
+      event: 'button_click',
+      button_id: 'main-cta',
+      button_text: 'Sign Up'
+    });
   };
 
   render() {
-    return <button onClick={this.handleClick}>Click Me</button>;
+    return <button onClick={this.handleClick}>Sign Up</button>;
   }
 }
 
-export default withGtmPush(TrackableButton);
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(TrackableButton);
 ```
 
-### `withGtmConsent(Component)`
-
-Injects consent management props.
+### E-commerce Tracking
 
 ```tsx
-import { withGtmConsent } from '@react-gtm-kit/react-legacy';
+class ProductCard extends React.Component {
+  trackAddToCart = () => {
+    this.props.gtm.push({
+      event: 'add_to_cart',
+      ecommerce: {
+        items: [
+          {
+            item_id: this.props.product.id,
+            item_name: this.props.product.name,
+            price: this.props.product.price
+          }
+        ]
+      }
+    });
+  };
 
+  render() {
+    return (
+      <div>
+        <h3>{this.props.product.name}</h3>
+        <button onClick={this.trackAddToCart}>Add to Cart</button>
+      </div>
+    );
+  }
+}
+
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(ProductCard);
+```
+
+### Managing Consent
+
+```tsx
 class CookieBanner extends React.Component {
   acceptAll = () => {
-    this.props.updateConsent({
+    this.props.gtm.updateConsent({
       ad_storage: 'granted',
       analytics_storage: 'granted',
       ad_user_data: 'granted',
@@ -152,24 +205,78 @@ class CookieBanner extends React.Component {
     });
   };
 
+  acceptAnalyticsOnly = () => {
+    this.props.gtm.updateConsent({
+      analytics_storage: 'granted'
+    });
+  };
+
   render() {
-    return <button onClick={this.acceptAll}>Accept All</button>;
+    return (
+      <div className="cookie-banner">
+        <p>We use cookies to improve your experience.</p>
+        <button onClick={this.acceptAnalyticsOnly}>Analytics Only</button>
+        <button onClick={this.acceptAll}>Accept All</button>
+      </div>
+    );
   }
 }
 
-export default withGtmConsent(CookieBanner);
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(CookieBanner);
 ```
 
-### `withGtmClient(Component)`
+### Setting Consent Defaults
 
-Injects the raw GTM client instance.
+```tsx
+class App extends React.Component {
+  componentDidMount() {
+    // Set consent defaults for EEA users
+    this.props.gtm.setConsentDefaults(
+      {
+        ad_storage: 'denied',
+        analytics_storage: 'denied',
+        ad_user_data: 'denied',
+        ad_personalization: 'denied'
+      },
+      { region: ['EEA'] }
+    );
+  }
+
+  render() {
+    return <YourApp />;
+  }
+}
+
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(App);
+```
+
+### Custom Prop Name
 
 ```tsx
-import { withGtmClient } from '@react-gtm-kit/react-legacy';
+// Use a custom prop name instead of 'gtm'
+class MyComponent extends React.Component {
+  handleClick = () => {
+    this.props.analytics.push({ event: 'click' });
+  };
+
+  render() {
+    return <button onClick={this.handleClick}>Click</button>;
+  }
+}
 
+export default withGtm({
+  config: { containers: 'GTM-XXXXXX' },
+  propName: 'analytics'
+})(MyComponent);
+```
+
+### Accessing the Raw Client
+
+```tsx
 class AdvancedComponent extends React.Component {
   componentDidMount() {
-    this.props.gtmClient.whenReady().then(() => {
+    // Wait for GTM to be fully loaded
+    this.props.gtm.client.whenReady().then(() => {
       console.log('GTM is ready!');
     });
   }
@@ -179,45 +286,35 @@ class AdvancedComponent extends React.Component {
   }
 }
 
-export default withGtmClient(AdvancedComponent);
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(AdvancedComponent);
 ```
 
 ---
 
-## Consent Mode v2 (GDPR)
+## TypeScript Support
+
+Full TypeScript definitions are included:
 
 ```tsx
-import { withGtm, withGtmConsent } from '@react-gtm-kit/react-legacy';
-import { consentPresets } from '@react-gtm-kit/core';
+import React from 'react';
+import { withGtm, LegacyGtmProps } from '@jwiedeman/gtm-kit-react-legacy';
 
-// Root component with consent defaults
-class App extends React.Component {
-  render() {
-    return <div>{this.props.children}</div>;
-  }
+interface MyComponentProps extends LegacyGtmProps {
+  title: string;
 }
 
-export default withGtm(App, {
-  containers: 'GTM-XXXXXX',
-  onBeforeInit: (client) => {
-    client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
-  }
-});
+class MyComponent extends React.Component<MyComponentProps> {
+  handleClick = () => {
+    // TypeScript knows gtm.push exists
+    this.props.gtm.push({ event: 'click' });
+  };
 
-// Cookie banner component
-class CookieBanner extends React.Component {
   render() {
-    return (
-      <div>
-        <button onClick={() => this.props.updateConsent({ analytics_storage: 'granted' })}>
-          Accept Analytics
-        </button>
-      </div>
-    );
+    return <h1 onClick={this.handleClick}>{this.props.title}</h1>;
   }
 }
 
-export default withGtmConsent(CookieBanner);
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(MyComponent);
 ```
 
 ---
@@ -228,14 +325,18 @@ If you're upgrading your codebase to use hooks, migration is straightforward:
 
 ```tsx
 // Before (react-legacy)
+import { withGtm } from '@jwiedeman/gtm-kit-react-legacy';
+
 class Button extends React.Component {
   render() {
-    return <button onClick={() => this.props.gtmPush({ event: 'click' })}>Click</button>;
+    return <button onClick={() => this.props.gtm.push({ event: 'click' })}>Click</button>;
   }
 }
-export default withGtmPush(Button);
+export default withGtm({ config: { containers: 'GTM-XXXXXX' } })(Button);
 
 // After (react-modern)
+import { useGtmPush } from '@jwiedeman/gtm-kit-react';
+
 function Button() {
   const push = useGtmPush();
   return <button onClick={() => push({ event: 'click' })}>Click</button>;
@@ -247,7 +348,7 @@ function Button() {
 ## Requirements
 
 - React 16.0+
-- `@react-gtm-kit/core` (peer dependency)
+- `@jwiedeman/gtm-kit` (peer dependency)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jwiedeman/gtm-kit-react-legacy",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Legacy React HOC adapter for GTM Kit - Google Tag Manager integration.",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@jwiedeman/gtm-kit": "^1.1.2"
+    "@jwiedeman/gtm-kit": "^1.1.4"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"