React-experiment NPM

@toggles/react-experiment

A React component to load Toggles experiments and render active or inactive children.

Install

Install with npm.

$ npm i @toggles/experiments @toggles/react-experiment

Please note the peer dependency, @toggles/experiments, which will allow you to load experiments from the Toggles API.

Usage

Please visit the Toggles app online. There, you can create an account and an experiment, configure specific users who should see the experiment, or specify a percent of users who should see the experiment.

Once this is complete, you can add an experiment provider to your app:

import React from 'react'
import Experiment from '@toggles/react-experiment'

const MyApp = () => <div>
  <Experiment.Provider
    apiKey="KEY"
    context={{uniqueId: "test.user@toggles.app"}}
    rapidAPIKey="KEY"
  >
    <SomeComponent />
  </Experiment.Provider>
</div>

The apiKey prop will be the API key from the settings tab in the Toggles app.

Next, copy an experiment id from an experiment card in the Toggles app. Add the following component, with that experiment id, in your app:

import React from 'react'
import Experiment from '@toggles/react-experiment'

export const AlwaysBlue = () => <div>
  <Experiment
    alwaysRenderInactive={false}
    experimentId="ID">
    <Experiment.Active>
      <span red>JK, I'm red!</span>
    </Experiment.Active>
    <Experiment.Inactive>
      <span blue>I'm blue! Huzzah!</span>
    </Experiment.Inactive>
  </Experiment>
</div>

export default AlwaysBlue

NOTE: No children passed to the Experiment component besides Active or Inactive will be rendered.

If you need access to raw experiments, you may use the withExperiments connector:

import React from 'react'
import {withExperiments} from '@toggles/react-experiment'

export const AlwaysBlue = withExperiments({experiments}) => {
  return <div>
    {experiment['ID'].active ? 'JK, I’m red!' : 'I’m blue! Huzzah!'}
  </div>
})

export default AlwaysBlue

Experiments will be made available with name, description, uuid, and active/inactive state for the provided context. For more information on using experiment contexts, please see @toggles/experiments

Props

Experiment.Provider

Name	Type	Description	Default
apiKey	string	Toggles API Key
apiUrl	string	API Url: use a RapidAPI host if using RapidAPI	"https://api.toggles.co"
context	object	string	Context used to uniquely identify a user
rapidAPIKey	string	RapidAPI Key

context is either of type shape, which supports a single property, uniqueId, or a string. This property represents identifying information about a user and may be used to blacklist or whitelist active experiment users.

NOTE: If you pass a RapidAPI Key it will be used with preference to the Toggles API Key.