Skip to content

Commit 27f9155

Browse files
authored
Revise Suspense loading instructions in README
Updated the Suspense loading section with new usage instructions and removed outdated information.
1 parent 6650984 commit 27f9155

1 file changed

Lines changed: 20 additions & 18 deletions

File tree

packages/react-native-sdk/README.md

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -48,24 +48,6 @@ function StartHuddleButton() {
4848

4949
See the [React SDK README](../react-sdk/README.md) for more details.
5050

51-
### Suspense loading
52-
53-
React Native uses the same Suspense support as the React SDK. Enable it for the provider and wrap components that call `useFlag` in a Suspense boundary:
54-
55-
```tsx
56-
import { Suspense } from "react";
57-
import { ActivityIndicator } from "react-native";
58-
import { ReflagProvider } from "@reflag/react-native-sdk";
59-
60-
<ReflagProvider publishableKey="{YOUR_PUBLISHABLE_KEY}" suspense>
61-
<Suspense fallback={<ActivityIndicator />}>
62-
<App />
63-
</Suspense>
64-
</ReflagProvider>;
65-
```
66-
67-
You can also override the behavior for one call with `useFlag("huddle", { suspense: true })`.
68-
6951
## React Native differences
7052

7153
- The Reflag toolbar is web-only and is not available in React Native.
@@ -122,6 +104,26 @@ export function App() {
122104
}
123105
```
124106

107+
108+
## Suspense loading
109+
110+
Enable `<Suspense>` support by setting the `suspense` prop on the provider and wrap components that call `useFlag` in a Suspense boundary:
111+
112+
```tsx
113+
import { Suspense } from "react";
114+
import { ActivityIndicator } from "react-native";
115+
import { ReflagProvider } from "@reflag/react-native-sdk";
116+
117+
<ReflagProvider publishableKey="{YOUR_PUBLISHABLE_KEY}" suspense>
118+
<Suspense fallback={<ActivityIndicator />}>
119+
<App />
120+
</Suspense>
121+
</ReflagProvider>;
122+
```
123+
124+
You can also override the behavior for one call with `useFlag("huddle", { suspense: true })`.
125+
126+
125127
## Bootstrapping
126128

127129
You can use `<ReflagBootstrappedProvider>` in React Native when you already have pre-fetched flags and want to avoid an initial fetch.

0 commit comments

Comments
 (0)