@probat/react 0.4.1 → 0.4.3

package/src/utils/createExperimentContext.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import React, { createContext, useContext, type ReactNode } from "react";
+
+/**
+ * Factory that creates a typed context + hook pair for passing a variantKey
+ * between components in different files without prop-drilling.
+ *
+ * @example
+ * ```tsx
+ * // experiment-context.ts
+ * export const { ExperimentProvider, useVariantKey } = createExperimentContext("pricing-test");
+ *
+ * // Parent.tsx
+ * const { variantKey } = useExperiment("pricing-test");
+ * <ExperimentProvider value={variantKey}><Child /></ExperimentProvider>
+ *
+ * // Child.tsx (different file)
+ * const variantKey = useVariantKey();
+ * const trackRef = useTrack({ experimentId: "pricing-test", variantKey });
+ * ```
+ */
+export function createExperimentContext(experimentId: string) {
+    const Ctx = createContext<string | null>(null);
+
+    function ExperimentProvider({
+        value,
+        children,
+    }: {
+        value: string;
+        children: ReactNode;
+    }) {
+        return React.createElement(Ctx.Provider, { value }, children);
+    }
+
+    function useVariantKey(): string {
+        const v = useContext(Ctx);
+        if (v === null) {
+            throw new Error(
+                `useVariantKey() must be used inside <ExperimentProvider> for "${experimentId}"`
+            );
+        }
+        return v;
+    }
+
+    return { ExperimentProvider, useVariantKey };
+}