diff --git a/.changeset/honest-spoons-drum.md b/.changeset/honest-spoons-drum.md
new file mode 100644
index 0000000000..16164c6979
--- /dev/null
+++ b/.changeset/honest-spoons-drum.md
@@ -0,0 +1,18 @@
+---
+'@xstate/react': patch
+---
+
+Options in `createActorContext` are now properly merged with provider options. Previously, provider options replaced the actor options.
+
+```tsx
+const { inspect } = createBrowserInspector();
+
+const SomeContext = createActorContext(someMachine, { inspect });
+
+// ...
+// Options are now merged:
+// { inspect: inspect, input: 10 }
+
+ {/* ... */}
+;
+```
diff --git a/packages/xstate-react/src/createActorContext.ts b/packages/xstate-react/src/createActorContext.ts
index 697b5bf787..f5728d4743 100644
--- a/packages/xstate-react/src/createActorContext.ts
+++ b/packages/xstate-react/src/createActorContext.ts
@@ -5,7 +5,7 @@ import { useSelector as useSelectorUnbound } from './useSelector';
export function createActorContext(
actorLogic: TLogic,
- interpreterOptions?: ActorOptions
+ actorOptions?: ActorOptions
): {
useSelector: (
selector: (snapshot: SnapshotFrom) => T,
@@ -30,7 +30,7 @@ export function createActorContext(
children,
logic: providedLogic = actorLogic,
machine,
- options: providedOptions = interpreterOptions
+ options: providedOptions
}: {
children: React.ReactNode;
logic: TLogic;
@@ -46,7 +46,10 @@ export function createActorContext(
);
}
- const actor = useActorRef(providedLogic, providedOptions);
+ const actor = useActorRef(providedLogic, {
+ ...actorOptions,
+ ...providedOptions
+ });
return React.createElement(OriginalProvider, {
value: actor,
diff --git a/packages/xstate-react/test/createActorContext.test.tsx b/packages/xstate-react/test/createActorContext.test.tsx
index 69d88860b8..cfa2a1c8b5 100644
--- a/packages/xstate-react/test/createActorContext.test.tsx
+++ b/packages/xstate-react/test/createActorContext.test.tsx
@@ -1,4 +1,10 @@
-import { createMachine, assign, fromPromise, Snapshot } from 'xstate';
+import {
+ createMachine,
+ assign,
+ fromPromise,
+ Snapshot,
+ InspectionEvent
+} from 'xstate';
import { fireEvent, screen, render, waitFor } from '@testing-library/react';
import { useSelector, createActorContext, shallowEqual } from '../src';
@@ -470,4 +476,47 @@ describe('createActorContext', () => {
expect(screen.getByTestId('value').textContent).toBe('84');
});
+
+ it('should merge createActorContext options with options passed to the provider', () => {
+ const events: InspectionEvent[] = [];
+ const SomeContext = createActorContext(
+ createMachine({
+ types: {
+ context: {} as { count: number },
+ input: {} as number
+ },
+ context: ({ input }) => ({ count: input })
+ }),
+ {
+ inspect: (ev) => {
+ events.push(ev);
+ }
+ }
+ );
+
+ const Component = () => {
+ const count = SomeContext.useSelector((state) => state.context.count);
+
+ return {count}
;
+ };
+
+ const App = () => {
+ return (
+
+
+
+ );
+ };
+
+ render();
+
+ expect(events.length).toBeGreaterThan(0);
+ expect(events).toContainEqual(
+ expect.objectContaining({
+ snapshot: expect.objectContaining({
+ context: { count: 10 }
+ })
+ })
+ );
+ });
});