@harnessio/ff-react-client-sdk - npm Package Compare versions

Comparing version 1.0.0-alpha.7 to 1.0.0-alpha.8

package.json

 {
   "name": "@harnessio/ff-react-client-sdk",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "author": "Harness",
@@ -18,3 +18,4 @@ "license": "Apache-2.0",
     "build-cjs": "tsc -p ./tsconfig-build.json --module commonjs --outDir dist/cjs",
-    "format": "prettier --write src"
+    "format": "prettier --write src",
+    "postinstall": "npm run build"
   },
@@ -21,0 +22,0 @@ "peerDependencies": {

README.md

@@ -0,1 +1,4 @@
+| ⚠️ ALPHA: PLEASE DON'T USE IN PROD ⚠️ |
+| ------------------------------------- |
+
 # React.js Client SDK For Harness Feature Flags
@@ -84,5 +87,3 @@
   return (
-    <p>
-      The "harnessappdemodarkmode" flag's value is {JSON.stringify(flagValue)}
-    </p>
+    <p>The value of "harnessappdemodarkmode" is {JSON.stringify(flagValue)}</p>
   )
@@ -96,3 +97,3 @@ }
     <>
-      <p>Here's all our flags:</p>
+      <p>Here are all our flags:</p>
       <pre>{JSON.stringify(flags, null, 2)}</pre>
@@ -104,2 +105,10 @@ </>
 
+## Async mode
+
+By default, the React Client SDK will block rendering of children until the initial load of Feature Flags has completed.
+This ensures that children have immediate access to all Flags when they are rendered. However, in some circumstances it
+may be beneficial to immediately render the application and handle display of loading on a component-by-component basis.
+The React Client SDK's asynchronous mode allows this by passing the optional `async` prop when connecting with the
+`FFContextProvider`.
+
 ## API
@@ -110,7 +119,9 @@
 The `FFContextProvider` component is used to set up the React context to allow your application to access Feature Flags
-using the `useFeatureFlag` and `useFeatureFlags` hooks. At minimum, it requires the `apiKey` you have set up in your
-Harness Feature Flags account, and the `target`. You can think of a `target` as a user.
+using the `useFeatureFlag` and `useFeatureFlags` hooks and `withFeatureFlags`
+[HOC](https://reactjs.org/docs/higher-order-components.html). At minimum, it requires the `apiKey` you have set up in
+your Harness Feature Flags account, and the `target`. You can think of a `target` as a user.
 
-The `FFContextProvider` component also accepts an `options` object and a `fallback` component. The `fallback` component
-will be displayed while the SDK is connecting and fetching your flags.
+The `FFContextProvider` component also accepts an `options` object, a `fallback` component and can be placed in
+[Async mode](#Async-mode) using the `async` prop. The `fallback` component will be displayed while the SDK is connecting
+and fetching your flags.
 
@@ -125,2 +136,3 @@ ```typescript jsx
     <FFContextProvider
+      async={false} // OPTIONAL: whether or not to use async mode
       apiKey="YOUR_API_KEY" // your SDK API key
@@ -157,2 +169,4 @@ target={{
 
+> N.B. when rendered in [Async mode](#Async-mode), the default value will be returned until the Flags are retrieved.
+
 ```typescript jsx
@@ -176,2 +190,4 @@ import { useFeatureFlag } from '@harnessio/ff-react-client-sdk'
 
+> N.B. when rendered in [Async mode](#Async-mode), the default value will be returned until the Flags are retrieved.
+
 ```typescript jsx
@@ -239,3 +255,5 @@ import { useFeatureFlag } from '@harnessio/ff-react-client-sdk'
 
-const MyConditionalComponent = ifFeatureFlag('flag1', 'ABC123')(MyComponent)
+const MyConditionalComponent = ifFeatureFlag('flag1', { matchValue: 'ABC123' })(
+  MyComponent
+)
 ```
@@ -246,6 +264,27 @@
 
+#### Loading fallback when in async mode
+
+If [Async mode](#Async-mode) is used, by default the component will wait for Flags to be retrieved before showing. This
+behaviour can be overridden by passing an element as `loadingFallback`; when loading the `loadingFallback` will be
+displayed until the Flags are retrieved, at which point the component will either show or hide as normal.
+
+```typescript jsx
+import { ifFeatureFlag } from '@harnessio/ff-react-client-sdk'
+
+// ...
+
+function MyComponent() {
+  return <p>This should render if the flag is on</p>
+}
+
+const MyConditionalComponent = ifFeatureFlag('flag1', {
+  loadingFallback: <p>Loading...</p>
+})(MyComponent)
+```
+
 ### `withFeatureFlags`
 
-The `withFeatureFlags` higher-order component (HOC) wraps your component and adds `flags` as an additional prop. `flags`
-contains the evaluations for all known flags.
+The `withFeatureFlags` higher-order component (HOC) wraps your component and adds `flags` and `loading` as additional
+props. `flags` contains the evaluations for all known flags and `loading` indicates whether the SDK is actively fetching
+Flags.
 
@@ -264,2 +303,23 @@ ```typescript jsx
 
+#### Loading in async mode
+
+If [Async mode](#Async-mode) is used, the `loading` prop will indicate whether the SDK has completed loading the Flags.
+When loading completes, the `loading` prop will be `false` and the `flags` prop will contain all known Flags.
+
+```typescript jsx
+import { withFeatureFlags } from '@harnessio/ff-react-client-sdk'
+
+// ...
+
+function MyComponent({ flags, loading }) {
+  if (loading) {
+    return <p>Loading...</p>
+  }
+
+  return <p>Flag1's value is {flags.flag1}</p>
+}
+
+const MyComponentWithFlags = withFeatureFlags(MyComponent)
+```
+
 ## Additional Reading
@@ -266,0 +326,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37871

increased by6.8%

Number of lines in readme file

334

increased by21.9%

Worsened metrics

Number of high supply chain risk alerts

1

increased byInfinity%

No dependency changes