feat: use mutate context hook

packages/react/src/provider/context.ts

@@ -7,7 +7,7 @@ import { NormalizedOptions, ReactFlagEvaluationOptions, normalizeOptions } from
  * DO NOT EXPORT PUBLICLY
  * @internal
  */
-export const Context = React.createContext<{ client: Client; options: ReactFlagEvaluationOptions } | undefined>(undefined);
+export const Context = React.createContext<{ client: Client; domain?: string; options: ReactFlagEvaluationOptions } | undefined>(undefined);
 
 /**
  * Get a normalized copy of the options used for this OpenFeatureProvider, see {@link normalizeOptions}.

packages/react/src/provider/index.ts

@@ -1,4 +1,5 @@
 export * from './provider';
 export * from './use-open-feature-client';
 export * from './use-when-provider-ready';
-export * from './test-provider';
+export * from './test-provider';
+export * from './use-context-mutator';

packages/react/src/provider/provider.tsx

@@ -35,5 +35,5 @@ export function OpenFeatureProvider({ client, domain, children, ...options }: Pr
     client = OpenFeature.getClient(domain);
   }
 
-  return <Context.Provider value={{ client, options }}>{children}</Context.Provider>;
+  return <Context.Provider value={{ client, options, domain }}>{children}</Context.Provider>;
 }

packages/react/src/provider/use-context-mutator.ts

@@ -0,0 +1,28 @@
+import { useCallback, useContext, useRef } from 'react';
+import { OpenFeature, EvaluationContext } from '@openfeature/web-sdk';
+import { Context } from './context';
+
+/**
+ *
+ * A hook for accessing context mutating functions.
+ *
+ */
+export function useContextMutator() {
+    const { domain } = useContext(Context) || {};
+    const previousContext = useRef<null | EvaluationContext>(null);
+
+    const mutateContext = useCallback(async (updatedContext: EvaluationContext) => {
+        if (previousContext.current !== updatedContext) {
+            if (!domain) {
+                OpenFeature.setContext(updatedContext);
+            } else {
+                OpenFeature.setContext(domain, updatedContext);
+            }
+            previousContext.current = updatedContext;
+        }
+    }, [domain]);
+
+    return {
+        mutateContext,
+    };
+}

packages/react/test/provider.spec.tsx

@@ -1,8 +1,8 @@
 import { EvaluationContext, OpenFeature } from '@openfeature/web-sdk';
 import '@testing-library/jest-dom'; // see: https://testing-library.com/docs/react-testing-library/setup
-import { render, renderHook, screen, waitFor } from '@testing-library/react';
+import { render, renderHook, screen, waitFor, fireEvent, act } from '@testing-library/react';
 import * as React from 'react';
-import { OpenFeatureProvider, useOpenFeatureClient, useWhenProviderReady } from '../src';
+import { OpenFeatureProvider, useOpenFeatureClient, useWhenProviderReady, useContextMutator, useStringFlagValue } from '../src';
 import { TestingProvider } from './test.utils';
 
 describe('OpenFeatureProvider', () => {
@@ -33,6 +33,9 @@ describe('OpenFeatureProvider', () => {
             if (context.user == '[email protected]') {
               return 'both';
             }
+            if (context.done === true) {
+              return 'parting';
+            }
             return 'greeting';
           },
         },
@@ -136,5 +139,74 @@ describe('OpenFeatureProvider', () => {
         await waitFor(() => expect(screen.queryByText('👍')).toBeInTheDocument(), { timeout: DELAY * 2 });
       });
     });
+
+    describe('useMutateContext', () => {
+      const MutateButton = () => {
+        const { mutateContext } = useContextMutator();
+
+        return <button onClick={() => mutateContext({ user: '[email protected]' })}>Update Context</button>;
+      };
+      const TestComponent = ({ name }: { name: string}) => {
+        const flagValue = useStringFlagValue<'hi' | 'bye' | 'aloha'>(SUSPENSE_FLAG_KEY, 'hi');
+
+        return <div>
+          <MutateButton />
+          <div>{`${name} says ${flagValue}`}</div>
+        </div>;
+      };
+
+      it('should update context when a domain is set', async () => {
+        const DOMAIN = 'mutate-context-tests';
+        OpenFeature.setProvider(DOMAIN, suspendingProvider());
+        render(<OpenFeatureProvider domain={DOMAIN}>
+          <React.Suspense fallback={<div>{FALLBACK}</div>}>
+            <TestComponent name="Will"/>
+          </React.Suspense>
+        </OpenFeatureProvider>,);
+
+        await waitFor(() => {
+          expect(screen.getByText('Will says hi')).toBeInTheDocument();
+        });
+
+        act(() => {
+          fireEvent.click(screen.getByText('Update Context'));
+        });
+        await waitFor(() => {
+          expect(screen.getByText('Will says aloha')).toBeInTheDocument();
+        }, { timeout: DELAY * 4 });
+      });
+
+      it('should update nested contexts', async () => {
+        const DOMAIN1 = 'Wills Domain';
+        const DOMAIN2 = 'Todds Domain';
+        OpenFeature.setProvider(DOMAIN1, suspendingProvider());
+        OpenFeature.setProvider(DOMAIN2, suspendingProvider());
+        render(<OpenFeatureProvider domain={DOMAIN1}>
+          <React.Suspense fallback={<div>{FALLBACK}</div>}>
+            <TestComponent name="Will"/>
+            <OpenFeatureProvider domain={DOMAIN2}>
+              <React.Suspense fallback={<div>{FALLBACK}</div>}>
+                <TestComponent name="Todd"/>
+              </React.Suspense>
+            </OpenFeatureProvider>
+          </React.Suspense>
+        </OpenFeatureProvider>,);
+
+        await waitFor(() => {
+          expect(screen.getByText('Todd says hi')).toBeInTheDocument();
+        });
+
+        act(() => {
+          // Click the Update context button in Todds domain
+          fireEvent.click(screen.getAllByText('Update Context')[1]);
+        });
+        await waitFor(() => {
+          expect(screen.getByText('Todd says aloha')).toBeInTheDocument();
+        }, { timeout: DELAY * 4 });
+        await waitFor(() => {
+          expect(screen.getByText('Will says hi')).toBeInTheDocument();
+        }, { timeout: DELAY * 4 });
+      });
+    });
   });
 });