Rebranch

React context-based, conditional rendering components for A/B experiments

Requires React v16.3.0 and up

npm i rebranch

// example App.js
import React from 'react'
import { BranchProvider } from 'rebranch'

// initialize the provider with the current session's
// A/B experimentation state
// This should be an object of experiment names,
// with...
import experimentsState from './experiments'
import Home from './Home'

/* example experimentsState object
{
  HOME_SIGN_UP: 'VARIANT',
  FOOTER_SIGN_UP: 'DEFAULT'
}
*/

export default class App extends React.Component {
  render () {
    return (
      <BranchProvider value={experimentsState}>
        <Home />
      </BranchProvider>
    )
  }
}

// example Home.js
import React from 'react'
import { BranchConsumer } from 'rebranch'
import SignUpForm from './SignUpForm'

// duplicated SignUpForm component, optimized for code deletion
import VARIANT_SignUpForm from './experiments/VARIANT_SignUpForm'

export default class Home extends React.Component {
  render () {
    return (
      <BranchConsumer name='HOME_SIGN_UP'>
        {state => {
          switch (state) {
            case 'VARIANT':
              return <VARIANT_SignUpForm />
            case 'DEFAULT':
            default:
              return <SignUpForm />
          }
        }}
      </BranchConsumer>
    )
  }
}

Alternative Branch Component API

// example Home.js
import React from 'react'
import { Branch } from 'rebranch'
import SignUpForm from './SignUpForm'
import VARIANT_SignUpForm from './experiments/VARIANT_SignUpForm'

// for true A/B tests (not multivariant)
// the first child will render when the experiment state is 'DEFAULT'
// the second child will render when the experiment state is *not* `'DEFAULT'`
export default class Home extends React.Component {
  render () {
    return (
      <Branch name='HOME_SIGN_UP'>
        <SignUpForm />
        <VARIANT_SignUpForm />
      </Branch>
    )
  }
}

Demo

View the example for a basic demo

MIT License