Unleash Client React

Not an official version

The basic strategies and metrics are not implemented by default as other clients of Unleash have. Currently this lib can only hide or show React components based on the Unleash config (server) and the strategies that you provide, it will not register client or send metrics.

By default every child of FeatureToggle will be hidden, if a page loads before UnleashProvider has fetched the features, the feature will not be shown until the server response comes back

You can pass disabled to UnleashProvider so it will not hide any children of FeatureToggle

Install

  npm install unleash-client-react

or

  yarn unleash-client-react

Usage

The idea is to mount UnleashProvider on the root of the app and import and use FeatureToggle where needed

Simple example

import React from "react"
import { UnleashProvider, FeatureToggle } from "unleash-client-react"

export default () => (
  <div>
    <UnleashProvider url="https://unleash.herokuapp.com/" >
      <FeatureToggle featureName="quick-order">
        <QuickOrderButton />
      </FeatureToggle>
    </UnleashProvicer>
  </div>
)

Using customStrategyExecutors

Unleash providers accept a prop in the following format:

  {
    "strategyName": (parameters, context) => boolean,
    "anotherStategy": (parameters, context) => boolean 
  }

Where parameters is received from the Unleash server and context is the same object that you can pass to UnleashProvider, you must return a boolean, true will show the feature, false will hide it

Also remember that you have to register the strategy names and its parameters on Unleash interface

Example of usage with context and customStrategyExecutors

Let's assume that there is a a feature that we what to call quick-order in the Unleash admin panel, that will have a single strategy called show-if-user-id-is-less-than and has the parameter userId with the value 50

The strategy show-if-user-id-is-less-than is not implemented by default, so we have to define it, also, we need to pass the user id by context

import React from "react"
import { UnleashProvider, FeatureToggle } from "unleash-client-react"

export default () => (
  <div>
    <UnleashProvider
      url="https://unleash.herokuapp.com/"
      context={{
        user: {
          id: 10
        }
      }}
      customStrategyExecutors={{
        `show-if-user-id-is-less-than`: (parameters, context) =>
          context.user.id < parameters.userId
      }}
    >
      <FeatureToggle featureName="quick-order">
        <QuickOrderButton />
      </FeatureToggle>
  </div>
)

Disabling in certain environments

You may configure the disabled based on a env variable, this way, any children of every FeatureToggle will not be hidden in any case

import { UnleashProvider, FeatureToggle } from "unleash-client-react"

export default () => (
    <UnleashProvider
      disabled={process.env.NODE_ENV !== "production"}
    >
      <FeatureToggle featureName="quick-order">
        <QuickOrderButton />
      </FeatureToggle>
    </UnleashProvider>
  </div>
)