posthog-js 1.48.2 → 1.50.0

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.48.2",
+    "version": "1.50.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",
@@ -35,7 +35,8 @@
     "files": [
         "lib/*",
         "dist/*",
-        "react/dist/*"
+        "react/dist/*",
+        "react/package.json"
     ],
     "dependencies": {
         "fflate": "^0.4.1",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.48.2",
+    "version": "1.50.0",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",
@@ -35,7 +35,8 @@
     "files": [
         "lib/*",
         "dist/*",
-        "react/dist/*"
+        "react/dist/*",
+        "react/package.json"
     ],
     "dependencies": {
         "fflate": "^0.4.1",

package/react/dist/esm/index.js

@@ -1,94 +1,93 @@
-import React, { useContext, useState, useCallback, useEffect } from 'react';
+import * as React from 'react';
+import { createContext, useState, useEffect, useContext } from 'react';
+import posthogJs from 'posthog-js';
 
-var cache = new Map();
-function getPostHogContext() {
-    var context = cache.get(React.createContext);
-    if (!context) {
-        context = React.createContext({});
-        cache.set(React.createContext, context);
-    }
-    return context;
-}
-function usePostHogContext() {
-    var context = useContext(getPostHogContext());
-    if (!context.client) {
-        throw new Error('No PostHog client instance can be found. ' +
-            'Please ensure that your application is wrapped by `PostHogProvider`.');
-    }
-    return context;
-}
+var PostHogContext = createContext({ client: undefined });
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+function PostHogProvider(_a) {
+    var children = _a.children, client = _a.client, apiKey = _a.apiKey, options = _a.options;
+    var _b = useState(client), posthog = _b[0], setPosthog = _b[1];
+    useEffect(function () {
+        if (client && apiKey) {
+            console.warn('You have provided both a client and an apiKey to PostHogProvider. The apiKey will be ignored in favour of the client.');
         }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var PostHogProvider = function (_a) {
-    var client = _a.client, children = _a.children;
-    var PostHogContext = getPostHogContext();
-    var _b = useState({ enabled: {} }), featureFlags = _b[0], setFeatureFlags = _b[1];
-    return (React.createElement(PostHogContext.Consumer, null, function (context) {
-        if (client && context.client !== client) {
-            context = Object.assign({}, context, { client: client });
+        if (client && options) {
+            console.warn('You have provided both a client and options to PostHogProvider. The options will be ignored in favour of the client.');
+        }
+        if (posthog) {
+            console.warn('This provider has already been initialized. You should only initialize it once at the root of your app.');
+            return;
         }
-        if (!context.client) {
-            throw new Error('PostHogProvider was not passed a client instance. ' +
-                'Make sure you pass in your PostHog client via the "client" prop.');
+        if (client) {
+            setPosthog(client);
         }
-        var value = __assign(__assign({}, context), { featureFlags: featureFlags, setFeatureFlags: setFeatureFlags });
-        return React.createElement(PostHogContext.Provider, { value: value }, children);
-    }));
+        else if (apiKey) {
+            posthogJs.init(apiKey, options);
+            setPosthog(posthogJs);
+        }
+    }, [client, apiKey, options]);
+    return React.createElement(PostHogContext.Provider, { value: { client: posthog } }, children);
+}
+
+var usePostHog = function () {
+    var client = useContext(PostHogContext).client;
+    return client;
 };
 
-function useFeatureFlags(props) {
-    if (props === void 0) { props = {}; }
-    var _a = props.refreshInterval, refreshInterval = _a === void 0 ? 0 : _a, _b = props.sendEvent, sendEvent = _b === void 0 ? true : _b;
-    var _c = usePostHogContext(), posthog = _c.client, featureFlags = _c.featureFlags, setFeatureFlags = _c.setFeatureFlags;
-    var getEnabledFlags = useCallback(function (flags) {
-        var enabled = flags.reduce(function (result, flag) {
-            var flagValue = posthog === null || posthog === void 0 ? void 0 : posthog.getFeatureFlag(flag, {
-                send_event: sendEvent,
-            });
-            if (typeof flagValue !== 'undefined') {
-                result[flag] = flagValue;
-            }
-            return result;
-        }, {});
-        setFeatureFlags({ active: flags, enabled: enabled });
-    }, [posthog, sendEvent, setFeatureFlags]);
+function useFeatureFlagEnabled(flag) {
+    var client = usePostHog();
+    var _a = useState(), featureEnabled = _a[0], setFeatureEnabled = _a[1];
     useEffect(function () {
-        if (posthog && refreshInterval > 0) {
-            var interval_1 = setInterval(function () {
-                posthog === null || posthog === void 0 ? void 0 : posthog.featureFlags.reloadFeatureFlags();
-            }, refreshInterval * 1000);
-            return function () { return clearInterval(interval_1); };
+        if (!client) {
+            return;
         }
-    }, [posthog, refreshInterval, getEnabledFlags]);
+        return client.onFeatureFlags(function () {
+            setFeatureEnabled(client.isFeatureEnabled(flag));
+        });
+    }, [client, flag]);
+    return featureEnabled;
+}
+
+function useFeatureFlagPayload(flag) {
+    var client = usePostHog();
+    var _a = useState(), featureFlagPayload = _a[0], setFeatureFlagPayload = _a[1];
     useEffect(function () {
-        posthog === null || posthog === void 0 ? void 0 : posthog.onFeatureFlags(getEnabledFlags);
-    }, [posthog, getEnabledFlags]);
+        if (!client) {
+            return;
+        }
+        return client.onFeatureFlags(function () {
+            setFeatureFlagPayload(client.getFeatureFlagPayload(flag));
+        });
+    }, [client, flag]);
+    return featureFlagPayload;
+}
+
+function useActiveFeatureFlags(flag) {
+    var client = usePostHog();
+    var _a = useState(), featureFlags = _a[0], setFeatureFlags = _a[1];
+    useEffect(function () {
+        if (!client) {
+            return;
+        }
+        return client.onFeatureFlags(function (flags) {
+            setFeatureFlags(flags);
+        });
+    }, [client, flag]);
     return featureFlags;
 }
 
-export { PostHogProvider, getPostHogContext, useFeatureFlags, usePostHogContext };
+function useFeatureFlagVariantKey(flag) {
+    var client = usePostHog();
+    var _a = useState(), featureFlagVariantKey = _a[0], setFeatureFlagVariantKey = _a[1];
+    useEffect(function () {
+        if (!client) {
+            return;
+        }
+        return client.onFeatureFlags(function () {
+            setFeatureFlagVariantKey(client.getFeatureFlag(flag));
+        });
+    }, [client, flag]);
+    return featureFlagVariantKey;
+}
+
+export { PostHogContext, PostHogProvider, useActiveFeatureFlags, useFeatureFlagEnabled, useFeatureFlagPayload, useFeatureFlagVariantKey, usePostHog };

package/react/dist/types/context/PostHogContext.d.ts

@@ -1,5 +1,7 @@
-import React from 'react';
-import { PostHogProviderValue } from './PostHogProvider';
-export declare function getPostHogContext(): React.Context<any>;
-export declare function usePostHogContext(): PostHogProviderValue;
+/// <reference types="react" />
+import posthogJs from 'posthog-js';
+export declare type PostHog = typeof posthogJs;
+export declare const PostHogContext: import("react").Context<{
+    client?: import("posthog-js").PostHog | undefined;
+}>;
 //# sourceMappingURL=PostHogContext.d.ts.map

package/react/dist/types/context/PostHogContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostHogContext.d.ts","sourceRoot":"","sources":["../../../src/context/PostHogContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAUxD,wBAAgB,iBAAiB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAOtD;AAMD,wBAAgB,iBAAiB,IAAI,oBAAoB,CASxD"}
+{"version":3,"file":"PostHogContext.d.ts","sourceRoot":"","sources":["../../../src/context/PostHogContext.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAGlC,oBAAY,OAAO,GAAG,OAAO,SAAS,CAAA;AAEtC,eAAO,MAAM,cAAc;;EAA6D,CAAA"}

package/react/dist/types/context/PostHogProvider.d.ts

@@ -1,20 +1,9 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { PostHog } from 'posthog-js';
-export interface FeatureFlags {
-    active?: string[];
-    enabled: {
-        [flag: string]: boolean | string;
-    };
-}
-interface PostHogProviderProps {
-    client: PostHog;
-    children: React.ReactNode | React.ReactNode[] | null;
-}
-export interface PostHogProviderValue {
-    client?: PostHog;
-    featureFlags: FeatureFlags;
-    setFeatureFlags: Dispatch<SetStateAction<FeatureFlags>>;
-}
-export declare const PostHogProvider: React.FC<PostHogProviderProps>;
-export {};
+import * as React from 'react';
+import { PostHog } from './PostHogContext';
+export declare function PostHogProvider({ children, client, apiKey, options, }: {
+    children?: React.ReactNode;
+    client?: PostHog | undefined;
+    apiKey?: string | undefined;
+    options?: any | undefined;
+}): JSX.Element;
 //# sourceMappingURL=PostHogProvider.d.ts.map

package/react/dist/types/context/PostHogProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostHogProvider.d.ts","sourceRoot":"","sources":["../../../src/context/PostHogProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAQpC,MAAM,WAAW,YAAY;IACzB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE;QACL,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KACnC,CAAA;CACJ;AAOD,UAAU,oBAAoB;IAC1B,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,IAAI,CAAA;CACvD;AAQD,MAAM,WAAW,oBAAoB;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,YAAY,CAAA;IAC1B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAA;CAC1D;AAQD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuB1D,CAAA"}
+{"version":3,"file":"PostHogProvider.d.ts","sourceRoot":"","sources":["../../../src/context/PostHogProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,OAAO,EAAkB,MAAM,kBAAkB,CAAA;AAE1D,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,GACV,EAAE;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,GAAG,GAAG,SAAS,CAAA;CAC5B,eAgCA"}

package/react/dist/types/hooks/index.d.ts

@@ -1,2 +1,6 @@
-export * from './useFeatureFlags';
+export * from './useFeatureFlagEnabled';
+export * from './useFeatureFlagPayload';
+export * from './useActiveFeatureFlags';
+export * from './useFeatureFlagVariantKey';
+export * from './usePostHog';
 //# sourceMappingURL=index.d.ts.map

package/react/dist/types/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA"}

package/react/dist/types/hooks/useActiveFeatureFlags.d.ts

@@ -0,0 +1,2 @@
+export declare function useActiveFeatureFlags(flag: string): string[] | undefined;
+//# sourceMappingURL=useActiveFeatureFlags.d.ts.map

package/react/dist/types/hooks/useActiveFeatureFlags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveFeatureFlags.d.ts","sourceRoot":"","sources":["../../../src/hooks/useActiveFeatureFlags.ts"],"names":[],"mappings":"AAGA,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAiBxE"}

package/react/dist/types/hooks/useFeatureFlagEnabled.d.ts

@@ -0,0 +1,2 @@
+export declare function useFeatureFlagEnabled(flag: string): boolean | undefined;
+//# sourceMappingURL=useFeatureFlagEnabled.d.ts.map

package/react/dist/types/hooks/useFeatureFlagEnabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlagEnabled.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFeatureFlagEnabled.ts"],"names":[],"mappings":"AAGA,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAiBvE"}

package/react/dist/types/hooks/useFeatureFlagPayload.d.ts

@@ -0,0 +1,3 @@
+import { JsonType } from 'posthog-js';
+export declare function useFeatureFlagPayload(flag: string): JsonType | undefined;
+//# sourceMappingURL=useFeatureFlagPayload.d.ts.map

package/react/dist/types/hooks/useFeatureFlagPayload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlagPayload.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFeatureFlagPayload.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAiBxE"}

package/react/dist/types/hooks/useFeatureFlagVariantKey.d.ts

@@ -0,0 +1,2 @@
+export declare function useFeatureFlagVariantKey(flag: string): string | boolean | undefined;
+//# sourceMappingURL=useFeatureFlagVariantKey.d.ts.map

package/react/dist/types/hooks/useFeatureFlagVariantKey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlagVariantKey.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFeatureFlagVariantKey.ts"],"names":[],"mappings":"AAGA,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAiBnF"}

package/react/dist/types/hooks/usePostHog.d.ts

@@ -0,0 +1,3 @@
+import { PostHog } from '../context';
+export declare const usePostHog: () => PostHog | undefined;
+//# sourceMappingURL=usePostHog.d.ts.map

package/react/dist/types/hooks/usePostHog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePostHog.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePostHog.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAkB,MAAM,YAAY,CAAA;AAEpD,eAAO,MAAM,UAAU,QAAO,OAAO,GAAG,SAGvC,CAAA"}

package/react/dist/umd/index.js

@@ -1,107 +1,128 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PosthogReact = {}, global.React));
-}(this, (function (exports, React) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('posthog-js')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'posthog-js'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PosthogReact = {}, global.React, global.posthogJs));
+}(this, (function (exports, React, posthogJs) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-    var cache = new Map();
-    function getPostHogContext() {
-        var context = cache.get(React__default['default'].createContext);
-        if (!context) {
-            context = React__default['default'].createContext({});
-            cache.set(React__default['default'].createContext, context);
-        }
-        return context;
-    }
-    function usePostHogContext() {
-        var context = React.useContext(getPostHogContext());
-        if (!context.client) {
-            throw new Error('No PostHog client instance can be found. ' +
-                'Please ensure that your application is wrapped by `PostHogProvider`.');
-        }
-        return context;
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
     }
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var posthogJs__default = /*#__PURE__*/_interopDefaultLegacy(posthogJs);
 
-    var PostHogProvider = function (_a) {
-        var client = _a.client, children = _a.children;
-        var PostHogContext = getPostHogContext();
-        var _b = React.useState({ enabled: {} }), featureFlags = _b[0], setFeatureFlags = _b[1];
-        return (React__default['default'].createElement(PostHogContext.Consumer, null, function (context) {
-            if (client && context.client !== client) {
-                context = Object.assign({}, context, { client: client });
+    var PostHogContext = React.createContext({ client: undefined });
+
+    function PostHogProvider(_a) {
+        var children = _a.children, client = _a.client, apiKey = _a.apiKey, options = _a.options;
+        var _b = React.useState(client), posthog = _b[0], setPosthog = _b[1];
+        React.useEffect(function () {
+            if (client && apiKey) {
+                console.warn('You have provided both a client and an apiKey to PostHogProvider. The apiKey will be ignored in favour of the client.');
+            }
+            if (client && options) {
+                console.warn('You have provided both a client and options to PostHogProvider. The options will be ignored in favour of the client.');
             }
-            if (!context.client) {
-                throw new Error('PostHogProvider was not passed a client instance. ' +
-                    'Make sure you pass in your PostHog client via the "client" prop.');
+            if (posthog) {
+                console.warn('This provider has already been initialized. You should only initialize it once at the root of your app.');
+                return;
             }
-            var value = __assign(__assign({}, context), { featureFlags: featureFlags, setFeatureFlags: setFeatureFlags });
-            return React__default['default'].createElement(PostHogContext.Provider, { value: value }, children);
-        }));
+            if (client) {
+                setPosthog(client);
+            }
+            else if (apiKey) {
+                posthogJs__default['default'].init(apiKey, options);
+                setPosthog(posthogJs__default['default']);
+            }
+        }, [client, apiKey, options]);
+        return React__namespace.createElement(PostHogContext.Provider, { value: { client: posthog } }, children);
+    }
+
+    var usePostHog = function () {
+        var client = React.useContext(PostHogContext).client;
+        return client;
     };
 
-    function useFeatureFlags(props) {
-        if (props === void 0) { props = {}; }
-        var _a = props.refreshInterval, refreshInterval = _a === void 0 ? 0 : _a, _b = props.sendEvent, sendEvent = _b === void 0 ? true : _b;
-        var _c = usePostHogContext(), posthog = _c.client, featureFlags = _c.featureFlags, setFeatureFlags = _c.setFeatureFlags;
-        var getEnabledFlags = React.useCallback(function (flags) {
-            var enabled = flags.reduce(function (result, flag) {
-                var flagValue = posthog === null || posthog === void 0 ? void 0 : posthog.getFeatureFlag(flag, {
-                    send_event: sendEvent,
-                });
-                if (typeof flagValue !== 'undefined') {
-                    result[flag] = flagValue;
-                }
-                return result;
-            }, {});
-            setFeatureFlags({ active: flags, enabled: enabled });
-        }, [posthog, sendEvent, setFeatureFlags]);
+    function useFeatureFlagEnabled(flag) {
+        var client = usePostHog();
+        var _a = React.useState(), featureEnabled = _a[0], setFeatureEnabled = _a[1];
         React.useEffect(function () {
-            if (posthog && refreshInterval > 0) {
-                var interval_1 = setInterval(function () {
-                    posthog === null || posthog === void 0 ? void 0 : posthog.featureFlags.reloadFeatureFlags();
-                }, refreshInterval * 1000);
-                return function () { return clearInterval(interval_1); };
+            if (!client) {
+                return;
             }
-        }, [posthog, refreshInterval, getEnabledFlags]);
+            return client.onFeatureFlags(function () {
+                setFeatureEnabled(client.isFeatureEnabled(flag));
+            });
+        }, [client, flag]);
+        return featureEnabled;
+    }
+
+    function useFeatureFlagPayload(flag) {
+        var client = usePostHog();
+        var _a = React.useState(), featureFlagPayload = _a[0], setFeatureFlagPayload = _a[1];
+        React.useEffect(function () {
+            if (!client) {
+                return;
+            }
+            return client.onFeatureFlags(function () {
+                setFeatureFlagPayload(client.getFeatureFlagPayload(flag));
+            });
+        }, [client, flag]);
+        return featureFlagPayload;
+    }
+
+    function useActiveFeatureFlags(flag) {
+        var client = usePostHog();
+        var _a = React.useState(), featureFlags = _a[0], setFeatureFlags = _a[1];
         React.useEffect(function () {
-            posthog === null || posthog === void 0 ? void 0 : posthog.onFeatureFlags(getEnabledFlags);
-        }, [posthog, getEnabledFlags]);
+            if (!client) {
+                return;
+            }
+            return client.onFeatureFlags(function (flags) {
+                setFeatureFlags(flags);
+            });
+        }, [client, flag]);
         return featureFlags;
     }
 
+    function useFeatureFlagVariantKey(flag) {
+        var client = usePostHog();
+        var _a = React.useState(), featureFlagVariantKey = _a[0], setFeatureFlagVariantKey = _a[1];
+        React.useEffect(function () {
+            if (!client) {
+                return;
+            }
+            return client.onFeatureFlags(function () {
+                setFeatureFlagVariantKey(client.getFeatureFlag(flag));
+            });
+        }, [client, flag]);
+        return featureFlagVariantKey;
+    }
+
+    exports.PostHogContext = PostHogContext;
     exports.PostHogProvider = PostHogProvider;
-    exports.getPostHogContext = getPostHogContext;
-    exports.useFeatureFlags = useFeatureFlags;
-    exports.usePostHogContext = usePostHogContext;
+    exports.useActiveFeatureFlags = useActiveFeatureFlags;
+    exports.useFeatureFlagEnabled = useFeatureFlagEnabled;
+    exports.useFeatureFlagPayload = useFeatureFlagPayload;
+    exports.useFeatureFlagVariantKey = useFeatureFlagVariantKey;
+    exports.usePostHog = usePostHog;
 
 })));

package/react/package.json

@@ -1,8 +1,8 @@
 {
     "name": "posthog-js-react",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0",
     "private": false,
-    "description": "Provides components and hooks for React integrations of PostHog.",
+    "description": "Provides components and hooks for React integrations of PostHog. It is not published to NPM, but is used in the main posthog-js package.",
     "repository": {
         "type": "git",
         "url": "https://github.com/PostHog/posthog-js",

package/react/dist/types/hooks/useFeatureFlags.d.ts

@@ -1,6 +0,0 @@
-import { FeatureFlags } from '../context';
-export declare function useFeatureFlags(props?: {
-    refreshInterval?: number;
-    sendEvent?: boolean;
-}): FeatureFlags;
-//# sourceMappingURL=useFeatureFlags.d.ts.map

package/react/dist/types/hooks/useFeatureFlags.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFeatureFlags.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFeatureFlags.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,YAAY,EAAE,MAAM,YAAY,CAAA;AAQ5D,wBAAgB,eAAe,CAAC,KAAK,GAAE;IAAE,eAAe,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,YAAY,CAkC3G"}