React integration for feature flags

[macobo]

Is your feature request related to a problem?

Our user needed to roll his own solution for refreshing feature flags: PostHog/posthog-js#100

We can provide tools to help them.

Describe the solution you'd like

Provide a hook, component or some other standardized way to use feature flags in react code which reacts (hah) to feature flags changing.

Stretch: provide ways to configure how/when feature flags are refreshed.

Describe alternatives you've considered

Additional context

We already have a partial solution in place in frontend/src/lib/logic/featureFlagLogic.js - but this is kea.js specific

Thank you for your feature request – we love each and every one!

[mariusandra]

Copy/pasting the kea-specific code here for others to take inspiration from:

// kea posthog feature flags
import { kea } from 'kea'

export const featureFlagLogic = kea({
    actions: {
        posthogFound: (posthog) => ({ posthog }),
        setFeatureFlags: (featureFlags) => ({ featureFlags }),
    },

    reducers: {
        featureFlags: [
            {},
            {
                setFeatureFlags: (state, { featureFlags }) => {
                    const flags = {}
                    for (const flag of featureFlags) {
                        flags[flag] = true
                    }
                    return flags
                },
            },
        ],
    },

    listeners: ({ actions }) => ({
        posthogFound: ({ posthog }) => {
            posthog.onFeatureFlags(actions.setFeatureFlags)
        },
    }),

    events: ({ actions, cache }) => ({
        afterMount: () => {
            if (typeof window !== 'undefined') {
                if (window.posthog) {
                    actions.posthogFound(window.posthog)
                } else {
                    // check every 300ms if posthog is now there
                    cache.posthogInterval = window.setInterval(() => {
                        if (window.posthog) {
                            actions.posthogFound(window.posthog)
                            window.clearInterval(cache.posthogInterval)
                        }
                    }, 300)
                }
            }
        },
        beforeUnmount: () => {
            if (typeof window !== 'undefined') {
                window.clearInterval(cache.posthogInterval)
            }
        },
    }),
})

The concepts should translate to the react hook syntax with a bit of work.

[ghost]

Hi guys, I've created a pull request against the posthog-js repo which aims to close this ticket. Please let me know your thoughts.