react-multivariate

npm install react-multivariate or

Usage no npm install needed!

<script type="module">
  import reactMultivariate from 'https://cdn.skypack.dev/react-multivariate';
</script>

README

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>
        );
    }
}