npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-optimizely

v1.1.0

Published

React helpers for the Optimizely JS API

Downloads

10

Readme

react-optimizely NPM travis-ci Greenkeeper

React helpers for A/B testing with Optimizely.

Quick Start Example

import React from 'react'
import optimizely, { variate } from 'react-optimizely'

class MyComponent extends React.Component {
  render () {
    return variate({
      'Variant A': () => <div>Variant A</div>,
      'Variant B': () => <div>Variant B for {this.props.optimizely.experiment.name}</div>,
      default: () => <div>No variant</div>
    }, this.props.optimizely.variant)
  }
}

export default optimizely('Experiment A')(MyComponent)

Installation

npm install --save react-optimizely

Or even better

yarn add react-optimizely

API

optimizely

Wraps a React component and injects props with information about an experiment and it's current variant.

The props injected are experiment, variant and isActivated.

If the experiment does not exist, then experiment and variant is null and isActivated is false. Otherwise experiment is an object.

If the experiment is not enabled or not activated, then variant is null and isActivated it false.

Parameters

  • experimentName String The name of the experiment, as it is in Optimizely.

Examples

import React from 'react'
import optimizely from 'react-optimizely'

class MyComponent extends React.Component {
  render () {
    const {
      experiment,
      variant,
      isActivated
    } = this.props.optimizely

    const result = []
    if (experiment) {
      result.push(<div>Experiment: {experiment.name} ({isActivated ? 'Activated' : 'Not activated' })</div>)
    }
    if (variant) {
      result.push(<div>Variant: {variant.name}, {variant.code}</div>)
    }

    return result
  }
}

export default optimizely('Experiment A')(MyComponent)

Returns a Function that takes a React component to wrap, that returns the wrapped component.

variate

Helper function to render different results based on the current variant.

Takes an object whose keys are variant names and whose values are the result for the given variant. The value can be of any type. If the value is a function, then variate returns the result of the given function.

The value for the special key default is returned if the current variant does not exist in the map, or if the variant was not specified (i.e. the experiment is not activated or not found).

Parameters

  • variantToResultMap Object An object whose keys are variant names and whose values are the result for the given variant.
  • variant Object The current variant for the experiment

Examples

import React from 'react'
import optimizely, { variate } from 'react-optimizely'

class MyComponent extends React.Component {
  render () {
    return variate({
      'Variant A': () => <div>Variant A</div>,
      'Variant B': () => <div>Variant B for {this.props.optimizely.experiment.name}</div>,
      default: () => <div>No variant</div>
    }, this.props.optimizely.variant)
  }
}

export default optimizely('Experiment A')(MyComponent)
import React from 'react'
import optimizely, { variate } from 'react-optimizely'

class MyComponent extends React.Component {
  render () {
    return <div>{variate({
      'Variant A': 'Hello, world',
      'Variant B': 'Hello, internet',
      default: 'Hello'
    }, this.props.optimizely.variant)}</div>
  }
}

export default optimizely('Experiment A')(MyComponent)

activate

Activates an experiment for the given visitor.

Note that the experiment is not activated if: the experiment doesn't exist, the experiment is not enabled or if the experiment name is not unique.

Parameters

  • experimentName String The experiments name

Examples

import React from 'react'
import { activate } from 'react-optimizely'

class MyComponent extends React.Component {
  activateExperiment () {
    activate('Experiment B')
  }
  render () {
    return <button onClick={this.activateExperiment>Activate experiment</button>
  }
}

export default MyComponent

Returns true if the experiment was activated and false otherwise.

getVariant

Gets the current variant for an experiment.

Note that the function returns null if the experiment is not activated, enabled or if it does not exist.

Parameters

  • experimentName String The experiments name

Examples

import React from 'react'
import { getVariant } from 'react-optimizely'

class MyComponent extends React.Component {
  currentVariantNameForExperiment (experimentName) {
    let variant = getVariant(experimentName)
    if (!variant) return null
    return variant.name
  }
  render () {
    return [
      <div>Activated variants</div>,
      <div>Experiment A: {this.currentVariantNameForExperiment('Experiment A')}</div>,
      <div>Experiment B: {this.currentVariantNameForExperiment('Experiment B')}</div>,
      <div>Experiment C: {this.currentVariantNameForExperiment('Experiment C')}</div>
    ]
  }
}

export default MyComponent

Returns the variant (as described on the Optimizely JS API reference) or null.

tag

Add custom tags to the current session.

Parameters

  • rawTags Object... A variadic number of objects whose keys are tag names and values are tag values

Examples

import React from 'react'
import { tag } from 'react-optimizely'

class MyComponent extends React.Component {
  onPurchase () {
    tag({ purchased: true, purchasedAt: Date.now }, { foo: 'bar' })
  }
  render () {
    return <button onClick={this.onPurchase}>Purchase</button>
  }
}

export default MyComponent

Returns undefined.

track

Track an event.

Parameters

  • event String The event name
  • revenue Number Optional: The amount of revenue generated from this event (in cents)

Examples

import React from 'react'
import { track } from 'react-optimizely'

class MyComponent extends React.Component {
  onPurchase () {
    track('purchase', 495) // $4.95 in revenue
  }
  render () {
    return <button onClick={this.onPurchase}>Purchase</button>
  }
}

export default MyComponent

Returns undefined.