A React component to load Toggles experiments and render active or inactive children.
npm install react-experimentA React component to load Toggles experiments and render active or inactive children.
Install with npm.
``sh`
$ 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.
Once this is complete, you can add an experiment provider to your app:
`jsx
import React from 'react'
import Experiment from '@toggles/react-experiment'
const MyApp = () =>
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:
`jsx
import React from 'react'
import Experiment from '@toggles/react-experiment'export const AlwaysBlue = () =>
alwaysRenderInactive={false}
experimentId="ID">
JK, I'm red!
I'm blue! Huzzah!
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:`jsx
import React from 'react'
import {withExperiments} from '@toggles/react-experiment'export const AlwaysBlue = withExperiments({experiments}) => {
return
{experiment['ID'].active ? 'JK, I’m red!' : 'I’m blue! Huzzah!'}
})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
$3
| 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.
$3
| Name | Type | Description | Default |
| --------------------------- | ------------- | ---------------------------------------------- | ----------------------------- |
| alwaysRenderInactive | bool | Should inactive render before API response |
false` |Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Copyright © 2019 []
Licensed under the MIT license.
*
_This file was generated by readme-generator on June 21, 2019._