JSPM – @openfeature/react-sdk@0.0.6-experimental

Package Exports

@openfeature/react-sdk

Readme

OpenFeature React SDK

OpenFeature is an open specification that provides a vendor-agnostic, community-driven API for feature flagging that works with your favorite feature flag management tool.

🧪 This SDK is experimental.

Basic Usage

Here's a basic example of how to use the current API with the in-memory provider:

import logo from './logo.svg';
import './App.css';
import { OpenFeatureProvider, useFeatureFlag, OpenFeature } from '@openfeature/react-sdk';
import { FlagdWebProvider } from '@openfeature/flagd-web-provider';

const flagConfig = {
  'new-message': {
    disabled: false,
    variants: {
      on: true,
      off: false,
    },
    defaultVariant: "on",
    contextEvaluator: (context: EvaluationContext) => {
      if (context.silly) {
        return 'on';
      }
      return 'off'
    }
  },
};

OpenFeature.setProvider(new InMemoryProvider(flagConfig));

function App() {
  return (
    <OpenFeatureProvider>
      <Page></Page>
    </OpenFeatureProvider>
  );
}

function Page() {
  const booleanFlag = useFeatureFlag('new-message', false);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {booleanFlag.value ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>}
      </header>
    </div>
  )
}

export default App;

Multiple Providers and Scoping

Multiple providers and scoped clients can be configured by passing a clientName to the OpenFeatureProvider:

// Flags within this scope will use the a client/provider associated with `myClient`,
function App() {
  return (
    <OpenFeatureProvider clientName={'myClient'}>
      <Page></Page>
    </OpenFeatureProvider>
  );
}

This is analogous to:

OpenFeature.getClient('myClient');

Re-rendering with Context Changes

By default, if the OpenFeature evaluation context is modified, components will be re-rendered. This is useful in cases where flag values are dependant on user-attributes or other application state (user logged in, items in card, etc). You can disable this feature in the useFeatureFlag hook options:

function Page() {
  const booleanFlag = useFeatureFlag('new-message', false, { updateOnContextChanged: false });
  return (
    <MyComponents></MyComponents>
  )
}

For more information about how evaluation context works in the React SDK, see the documentation on OpenFeature's static context SDK paradigm.

Re-rendering with Flag Configuration Changes

By default, if the underlying provider emits a ConfigurationChanged event, components will be re-rendered. This is useful if you want your UI to immediately reflect changes in the backend flag configuration. You can disable this feature in the useFeatureFlag hook options:

function Page() {
  const booleanFlag = useFeatureFlag('new-message', false, { updateOnConfigurationChanged: false });
  return (
    <MyComponents></MyComponents>
  )
}

Note that if your provider doesn't support updates, this configuration has no impact.

Suspense Support

Frequently, providers need to perform some initial startup tasks. It may be desireable not to display components with feature flags until this is complete. Built-in suspense support makes this easy:

function Content() {
  // cause the "fallback" to be displayed if the component uses feature flags and the provider is not ready
  return (
    <Suspense fallback={<Fallback />}>
      <Message />
    </Suspense>
  );
}

function Message() {
  // component to render after READY.
  const { value: showNewMessage } = useFeatureFlag('new-message', false);

  return (
    <>
      {showNewMessage ? (
        <p>Welcome to this OpenFeature-enabled React app!</p>
      ) : (
        <p>Welcome to this plain old React app!</p>
      )}
    </>
  );
}

function Fallback() {
  // component to render before READY.
  return <p>Waiting for provider to be ready...</p>;
}