react-multivariate
Installation
npm install react-multivariate
or
yarn add react-multivariate
Structure
The package has two parts:
multi-variate provider
Component that wraps your app or a smaller section. This could represent the entire app, a single page, or a single component.
props
experiments
name: experiments
type: string[]
Array of strings
purpose: A list of enabled experiments to provide to Multivariate components below the provider
ready
name: ready
type: boolean
purpose: Tell Multivariate components they're ready to render
default: true
multi-variate consumer/component
Component that has a render prop with experiments as an argument
Usage
Very simple example
;; Component experiments = 'say-goodbye' ; { return <MultivariateProvider experiments=thisexperiments> <button> Say <Multivariate> { if experiments return 'goodbye'; return 'hello'; } </Multivariate> </button> </MultivariateProvider> ; }
React-redux example
;;; { return experiments: stateexperiments } mapStateToProps { return <MultivariateProvider experiments=propsexperiments> <SomeComponent /> </MultivariateProvider> }
Async example
;;; Component state = experiments: ready: false { const experiments = await ; this; } { return <MultivariateProvider experiments=thisexperiments> <button> Say <Multivariate> { if experiments return 'goodbye'; return 'hello'; } </Multivariate> </button> </MultivariateProvider> ; }
Multiple providers
;;; { return experiments: stateexperiments } Component experiments = a: 'alternative-page-a' b: 'alternative-page-b' { return <Pages> <MultivariateProvider experiments=thisexperimentsa > <Multivariate> { if experiments return <AlternativePageA />; return <PageA />; } </Multivariate> </MultivariateProvider> <MultivariateProvider experiments=thisexperimentsb > <Multivariate> { if experiments return <AlternativePageB />; return <PageB />; } </Multivariate> </MultivariateProvider> </Pages> ; }