@featurescope/react-sdk v0.0.13

@featurescope/react-sdk

React SDK for featurescope.

Featurescope provides simple, reliable, and remotely configurable feature management to power your applications.

Installation

npm install @featurescope/react-sdk

# or ...

yarn add @featurescope/react-sdk

Setup

In order to use the featurescope React SDK, you'll also have to create a featurescope account.

Visit featurescope.io and register for a new account.

Next, follow the instructions on the Getting started page. These steps will walk you through creating your first feature and fetching it with a featurescope SDK.

Usage

The featurescope React SDK is a thin, React wrapper on top of the featurescope isomorphic Node.js SDK. It exposes a context and a provider, as well as some helpful hooks.

To integrate with the React SDK, include the FeaturesProvider as high up in your React root as possible:

import { FeaturesProvider } from "@featurescope/react-sdk"

const App = ({ children }) => {
  return (
    <FeaturesProvider apiKey="<YOUR KEY HERE>">{children}</FeaturesProvider>
  )
}

All of the props available to the FeaturesProvider are described below. You may use these props to control which feature variations are provided by the FeaturesContext.

Next, use your feature in any nested component using the useFeature hook:

const Navigation = ({ children }) => {
  const showVerticalLayout = useFeature("showVerticalLayout")
  const styles = {
    display: "flex",
    flexDirection: showVerticalLayout ? "column" : "row",
  }

  return <div styles={styles}>{children}</div>
}

Where "showVerticalLayout" is the name of a feature you created while following the setup instructions above.

Additionally, there is a hook that allows you to fetch all features for a given scope, useFeatures:

const Navigation = ({ children }) => {
  const { showVerticalLayout } = useFeatures()
  const styles = {
    display: "flex",
    flexDirection: showVerticalLayout ? "column" : "row",
  }

  return <div styles={styles}>{children}</div>
}

Using Context

The FeaturesContext is also exported, for ease of use, and in case you prefer to use the legacy context consumer:

import { FeaturesContext } from "@featurescope/react-sdk"

const Navigation = ({ children }) => {
  return (
    <FeaturesContext.Consumer>
      {({ showVerticalLayout }) => {
        const styles = {
          display: "flex",
          flexDirection: showVerticalLayout ? "column" : "row",
        }

        return <div styles={styles}>{children}</div>
      }}
    </FeaturesContext.Consumer>
  )
}

Provider Props

This table includes all of the available props on the FeaturesProvider: