Skip to content

Commit 418409e

Browse files
authored
docs: fix typos, links, and format (#1075)
Signed-off-by: Michael Beemer <[email protected]>
1 parent 57ec47b commit 418409e

File tree

1 file changed

+19
-20
lines changed

1 file changed

+19
-20
lines changed

Diff for: packages/react/README.md

+19-20
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ function Page() {
149149
}
150150
```
151151

152-
You can use the strongly-typed flag value and flag evaluation detail hooks as well, if you prefer.
152+
You can use the strongly typed flag value and flag evaluation detail hooks as well if you prefer.
153153

154154
```tsx
155155
import { useBooleanFlagValue } from '@openfeature/react-sdk';
@@ -175,7 +175,7 @@ const {
175175
Multiple providers can be used by passing a `domain` to the `OpenFeatureProvider`:
176176

177177
```tsx
178-
// Flags within this domain will use the a client/provider associated with `my-domain`,
178+
// Flags within this domain will use the client/provider associated with `my-domain`,
179179
function App() {
180180
return (
181181
<OpenFeatureProvider domain={'my-domain'}>
@@ -238,11 +238,11 @@ Note that if your provider doesn't support updates, this configuration has no im
238238
#### Suspense Support
239239

240240
> [!NOTE]
241-
> React suspense is an experimental feature and subject to change in future versions.
241+
> React suspense is an experimental feature and is subject to change in future versions.
242242
243243

244244
Frequently, providers need to perform some initial startup tasks.
245-
It may be desireable not to display components with feature flags until this is complete, or when the context changes.
245+
It may be desirable not to display components with feature flags until this is complete or when the context changes.
246246
Built-in [suspense](https://react.dev/reference/react/Suspense) support makes this easy.
247247
Use `useSuspenseFlag` or pass `{ suspend: true }` in the hook options to leverage this functionality.
248248

@@ -283,22 +283,21 @@ This can be disabled in the hook options (or in the [OpenFeatureProvider](#openf
283283

284284
The tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations.
285285
This is essential for robust experimentation powered by feature flags.
286-
For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](#hooks) or [provider](#providers) can be associated with telemetry reported in the client's `track` function.
286+
For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](https://openfeature.dev/docs/reference/technologies/client/web/#hooks) or [provider](https://openfeature.dev/docs/reference/technologies/client/web/#providers) can be associated with telemetry reported in the client's `track` function.
287287

288-
The React SDK includes a hook for firing tracking events in the <OpenFeatureProvider> context in use:
288+
The React SDK includes a hook for firing tracking events in the `<OpenFeatureProvider>` context in use:
289289

290290
```tsx
291-
function MyComponent() {
291+
function MyComponent() {
292+
// get a tracking function for this <OpenFeatureProvider>.
293+
const { track } = useTrack();
292294

293-
// get a tracking function for this <OpenFeatureProvider>.
294-
const { track } = useTrack();
295+
// call the tracking event
296+
// can be done in render, useEffect, or in handlers, depending on your use case
297+
track(eventName, trackingDetails);
295298

296-
// call the tracking event
297-
// can be done in render, useEffect, or in handlers, depending on your use case
298-
track(eventName, trackingDetails);
299-
300-
return <>...</>;
301-
}
299+
return <>...</>;
300+
}
302301
```
303302

304303
### Testing
@@ -365,23 +364,23 @@ class MyTestProvider implements Partial<Provider> {
365364
> I get an error that says something like: `A React component suspended while rendering, but no fallback UI was specified.`
366365
367366
The OpenFeature React SDK features built-in [suspense support](#suspense-support).
368-
This means that it will render your loading fallback automatically while the your provider starts up, and during context reconciliation for any of your components using feature flags!
367+
This means that it will render your loading fallback automatically while your provider starts up and during context reconciliation for any of your components using feature flags!
369368
If you use suspense and neglect to create a suspense boundary around any components using feature flags, you will see this error.
370369
Add a suspense boundary to resolve this issue.
371370
Alternatively, you can disable this suspense (the default) by removing `suspendWhileReconciling=true`, `suspendUntilReady=true` or `suspend=true` in the [evaluation hooks](#evaluation-hooks) or the [OpenFeatureProvider](#openfeatureprovider-context-provider) (which applies to all evaluation hooks in child components).
372371

373-
> I get odd rendering issues, or errors when components mount, if I use the suspense features.
372+
> I get odd rendering issues or errors when components mount if I use the suspense features.
374373
375374
In React 16/17's "Legacy Suspense", when a component suspends, its sibling components initially mount and then are hidden.
376375
This can cause surprising effects and inconsistencies if sibling components are rendered while the provider is still getting ready.
377376
To fix this, you can upgrade to React 18, which uses "Concurrent Suspense", in which siblings are not mounted until their suspended sibling resolves.
378377
Alternatively, if you cannot upgrade to React 18, you can use the `useWhenProviderReady` utility hook in any sibling components to prevent them from mounting until the provider is ready.
379378

380-
> I am using multiple `OpenFeatureProvider` contexts, but they are sharing the same provider or evaluation context. Why?
379+
> I am using multiple `OpenFeatureProvider` contexts, but they share the same provider or evaluation context. Why?
381380
382381
The `OpenFeatureProvider` binds a `client` to all child components, but the provider and context associated with that client is controlled by the `domain` parameter.
383382
This is consistent with all OpenFeature SDKs.
384-
To scope an OpenFeatureProvider to a particular provider/context set the `domain` parameter on your `OpenFeatureProvider`:
383+
To scope an OpenFeatureProvider to a particular provider/context, set the `domain` parameter on your `OpenFeatureProvider`:
385384

386385
```tsx
387386
<OpenFeatureProvider domain={'my-domain'}>
@@ -391,7 +390,7 @@ To scope an OpenFeatureProvider to a particular provider/context set the `domain
391390

392391
> I can import things form the `@openfeature/react-sdk`, `@openfeature/web-sdk`, and `@openfeature/core`; which should I use?
393392
394-
The `@openfeature/react-sdk` re-exports everything from its peers (`@openfeature/web-sdk` and `@openfeature/core`), and adds the React-specific features.
393+
The `@openfeature/react-sdk` re-exports everything from its peers (`@openfeature/web-sdk` and `@openfeature/core`) and adds the React-specific features.
395394
You can import everything from the `@openfeature/react-sdk` directly.
396395
Avoid importing anything from `@openfeature/web-sdk` or `@openfeature/core`.
397396

0 commit comments

Comments
 (0)