Update react-openfeature.md (#619)

DevCycleHQ · Apr 16, 2024 · 1b62a24 · 1b62a24
1 parent 848ca7b
commit 1b62a24
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/docs/sdk/client-side-sdks/react/react-gettingstarted.md b/docs/sdk/client-side-sdks/react/react-gettingstarted.md
@@ -29,8 +29,10 @@ It’s best to initialize DevCycle in your root component (App.jsx or App.tsx),
 
 ## Non-Blocking
 
+[//]: # (wizard-initialize-start)
+
 The withDevCycleProvider higher-order component (HOC) initializes the React SDK and wraps your root component. This provider may cause your app
-to flicker when it is first rendered, as all DevCycle variables will return their default values until the SDK is initialized.
+to flicker when it is first rendered, as all DevCycle variables will return their default values until the SDK is initialized. To avoid this, use the usIsDevCycleInitialized hook.
 
 ```jsx
 import { withDevCycleProvider } from '@devcycle/react-client-sdk'
@@ -42,6 +44,8 @@ export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(
 )
 ```
 
+[//]: # (wizard-initialize-end)
+
 ## Blocking
 
 The `useIsDevCycleInitialized` hook allows you to block rendering of your application until SDK initialization is complete.

diff --git a/docs/sdk/client-side-sdks/react/react-install.md b/docs/sdk/client-side-sdks/react/react-install.md
@@ -17,11 +17,13 @@ This SDK is compatible with React versions 16.8.0 and above.
 
 To install the SDK, run the following command:
 
+[//]: # (wizard-install-start)
 ### npm
 
 ```bash
 npm install --save @devcycle/react-client-sdk
 ```
+[//]: # (wizard-install-end)
 
 ### yarn
 

diff --git a/docs/sdk/client-side-sdks/react/react-openfeature.md b/docs/sdk/client-side-sdks/react/react-openfeature.md
@@ -23,11 +23,15 @@ DevCycle provides a Javascript implementation of the OpenFeature Web Provider in
 
 Install the OpenFeature React SDK and DevCycle Web Provider:
 
+[//]: # (wizard-install-start)
+
 #### NPM
 ```bash
-npm install --save @openfeature/react-sdk @devcycle/openfeature-web-provider 
+npm install @openfeature/react-sdk @devcycle/openfeature-web-provider 
 ```
 
+[//]: # (wizard-install-end)
+
 #### Yarn
 If using `yarn` you will need to install further peer-dependencies:
 
@@ -37,6 +41,8 @@ yarn add @openfeature/react-sdk @openfeature/web-sdk @openfeature/core @devcycle
 
 ### Getting Started
 
+[//]: # (wizard-initialize-start)
+
 Initialize the DevCycleProvider and set it as the provider for OpenFeature,
 which will initialize the DevCycle JS Client SDK internally:
 
@@ -54,7 +60,15 @@ function App() {
     </OpenFeatureProvider>
   )
 }
+```
+[//]: # (wizard-initialize-end)
 
+### Evaluating a Variable
+[//]: # (wizard-evaluate-start)
+
+Use a variable value by passing the variable key and default value to one of the OpenFeature flag evaluation hooks
+
+```typescript jsx
 function Page() {
   const newMessage = useBooleanFlagValue('new-message', false)
   return (
@@ -68,6 +82,8 @@ function Page() {
 
 export default App
 ```
+[//]: # (wizard-evaluate-end)
+
 
 ### Passing DevCycleOptions to the DevCycleProvider
 

diff --git a/docs/sdk/client-side-sdks/react/react-usage.md b/docs/sdk/client-side-sdks/react/react-usage.md
@@ -11,6 +11,8 @@ sidebar_custom_props: { icon: material-symbols:toggle-on }
 
 ## Getting a Variable
 
+[//]: # (wizard-evaluate-start)
+
 The SDK provides a hook to access your DevCycle variables:
 
 ### useVariableValue
@@ -38,6 +40,8 @@ const DevCycleFeaturePage = () => {
 
 If a change on the dashboard triggers your variable value to change, it will rerender any components calling this hook in order to reflect your new variable value. To learn more, visit the [Realtime Updates](/sdk/features#realtime-updates) page.
 
+[//]: # (wizard-evaluate-end)
+
 ## Getting the DevCycle Client
 
 The SDK provides a hook to access the underlying DevCycle client. This allows you to identify users, track events, and directly access