Network Powering Makers

    react-multivariate

    1.0.0 • Public • Published

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

    Keywords

    none

    Install

    npm i react-multivariate

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    255 kB

    Total Files

    17

    Last publish

    Collaborators

    • lukeboyle