Skip to main content

<ReflexProvider>

<ReflexProvider> lets you specify a producer to use with Roact Reflex in your app.

<ReflexProvider producer={producer}>
    <App />
</ReflexProvider>

Reference​

<ReflexProvider>​

Use <ReflexProvider> to make a Reflex producer available to the rest of your app. The Hooks can then be used by any component nested inside of <ReflexProvider>.

import Roact from "@rbxts/roact";
import { ReflexProvider } from "@rbxts/roact-reflex";

Roact.mount(
    <ReflexProvider producer={producer}>
        <App />
    </ReflexProvider>,
    Players.LocalPlayer.WaitForChild("PlayerGui"),
);

See more examples below.

Props​

  • producer - The root Reflex producer to use for the rest of the app.
caveats

Usage​

Setting up Roact Reflex​

Roact Reflex allows you to use Hooks to access the Reflex state from anywhere in your app. To do this, you need to wrap your root component in <ReflexProvider> when you render it:

import Roact from "@rbxts/roact";
import { ReflexProvider } from "@rbxts/roact-reflex";

Roact.mount(
    <ReflexProvider producer={producer}>
        <App />
    </ReflexProvider>,
    Players.LocalPlayer.WaitForChild("PlayerGui"),
);

Reflex uses this provider to allow components to hook into the state of your game with Hooks like useProducer. This component should be present somewhere in the root of your app anywhere you want to use a Reflex Hook.

Using other providers with ReflexProvider​

Your app may have other providers that you want to use with Roact Reflex. To do this, you can nest the providers in any order:

import Roact from "@rbxts/roact";
import { ReflexProvider } from "@rbxts/roact-reflex";

Roact.mount(
    <ReflexProvider producer={producer}>
        <OtherProvider>
            <App />
        </OtherProvider>
    </ReflexProvider>,
    Players.LocalPlayer.WaitForChild("PlayerGui"),
);

It can also help to create a custom provider that combines all of your providers into one:

import Roact from "@rbxts/roact";

export function RootProvider(props: Roact.PropsWithChildren) {
    return (
        <ReflexProvider producer={producer}>
            <OtherProvider>{props[Roact.Children]}</OtherProvider>
        </ReflexProvider>
    );
}