react-multivariate

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

import React from 'react';
import Multivariate, {MultivariateProvider} from 'react-multivariate';

export class App extends React.Component {
	experiments = [
		'say-goodbye'
	];
	
	render() {
		return (
			<MultivariateProvider experiments={this.experiments}>
                <button>
                    Say
                    <Multivariate>
                        {(experiments) => {
                        	if (experiments.includes('say-goodbye')) {
                        		return 'goodbye';
                        	}
                        	
                        	return 'hello';
                        }}
                    </Multivariate>
                </button>			
            </MultivariateProvider>
		);
	}
}

React-redux example

import React from 'react';
import {connect} from 'react-redux';
import {MultivariateProvider} from 'react-multivariate';

function mapStateToProps(state) {
	return {
		experiments: state.experiments
	}
}

export default connect(mapStateToProps)((props) => {
	return (
		<MultivariateProvider experiments={props.experiments}>
		    <SomeComponent />
        </MultivariateProvider>
	)
})

Async example

import React from 'react';
import Multivariate, {MultivariateProvider} from 'react-multivariate';
import getExperiments from './utils';

export class App extends React.Component {
	state = {
	    experiments: [],
	    ready: false
	}

	componentDidMount() {
	    const experiments = await getExperiments();

	    this.setState({
	        experiments,
	        ready: true
	    });
	}

	render() {
        return (
            <MultivariateProvider experiments={this.experiments}>
                <button>
                    Say
                    <Multivariate>
                        {(experiments) => {
                            if (experiments.includes('say-goodbye')) {
                                return 'goodbye';
                            }

                            return 'hello';
                        }}
                    </Multivariate>
                </button>
            </MultivariateProvider>
        );
    }
}

Multiple providers

import React from 'react';
import {connect} from 'react-redux';
import {MultivariateProvider} from 'react-multivariate';

function mapStateToProps(state) {
	return {
		experiments: state.experiments
	}
}

export default class extends React.Component {
    experiments = {
        a: [
            'alternative-page-a'
        ],
        b: [
            'alternative-page-b'
        ]
    }

    render() {
        return (
            <Pages>
                 <MultivariateProvider
                    experiments={this.experiments.a}
                 >
                    <Multivariate>
                        {(experiments) => {
                            if (experiments.includes('alternative-page-a')) {
                                return <AlternativePageA />;
                            }

                            return <PageA />;
                        }}
                    </Multivariate>
                 </MultivariateProvider>
                 <MultivariateProvider
                    experiments={this.experiments.b}
                 >
                    <Multivariate>
                    {(experiments) => {
                        if (experiments.includes('alternative-page-b')) {
                            return <AlternativePageB />;
                        }

                        return <PageB />;
                    }}
                    </Multivariate>
                 </MultivariateProvider>
             </Pages>
        );
    }
}