Izanami react client

React client

react-izanami is a simple set of React components to leverage the power of Izanami feature flipping and experiments.

In order to use the client you need to proxify Izanami to avoid leaking the credentials to the client side.

Install the client

npm install react-izanami

Import

import {IzanamiProvider, Feature, Enabled, Disabled, Experiment, Variant, Api as IzanamiApi} from 'izanami';

Izanami provider

You can wrap your application in the izanami provider and let izanami fetch data from the proxy you have exposed:

<IzanamiProvider fetchFrom="/api/izanami">
    {/* your app */}    
  </IzanamiProvider>

You can pass fallbacks in the case of the server is not up:

<IzanamiProvider fetchFrom="/api/izanami" featuresFallback={{my: {feature: {active: true}}}} experimentsFallback={{my:{experiment:{variant: 'B'}}}} >
{/* ... */}    
</IzanamiProvider>

You can also pass features and experiments as props if you don't want the provider to fetch datas:

<IzanamiProvider features={{my: {feature: {active: true}}}} experiments={{my:{experiment:{variant: 'B'}}}} >
{/* ... */}
</IzanamiProvider>

You can trigger manual reload using the Api class. For example during router transition :

componentWillReceiveProps(nextProps) {
    // will be true
    const locationChanged = nextProps.location !== this.props.location;
    if (locationChanged) {
      //Reload izanami data on route change
      IzanamiApi.izanamiReload("/api/izanami");
    }
}

Feature flipping

Once you the provider configured, you can switch code depending on a feature :

<Feature path="izanami.example.deleteAll">
  <Pending>
    <div>Fetching izanami features configuration...</div>
  </Pending>
  <Enabled>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td><button type="button"  className="btn btn-sm btn-default" onClick={this.deleteAll}>Delete done items</button></td>
    </tr>
  </Enabled>
  <Disabled>
    <tr></tr>
  </Disabled>
</Feature>

Experiments (A/B testing)

Once you the provider configured, you can displayed a specific variant for an experiment :

{this.state.todoLists.map(l =>
    <tr key={`td-${l.name}`}>
      <td><Link to={`/todos/${l.name}`} >{l.name}</Link></td>
      <td>{l.user}</td>
      <td>
        <Experiment path={"izanami:example:button"} notifyDisplay="/api/izanami/experiments/displayed" >
          <Variant id={"A"}>
            <Link to={`/todos/${l.name}`} onClick={this.onTodosClick} className="btn btn-sm btn-default"><i className="fas fa-eye" aria-hidden="true" /></Link>
            <button className="btn btn-sm btn-default" onClick={this.removeTodoList(l.name)}><i className="glyphicon glyphicon-trash" /></button>
          </Variant>
          <Variant id={"B"}>
            <Link to={`/todos/${l.name}`} onClick={this.onTodosClick} className="btn btn-sm btn-primary"><i className="glyphicon glyphicon-pencil" /></Link>
            <button className="btn btn-sm btn-primary" onClick={this.removeTodoList(l.name)}><i className="glyphicon glyphicon-trash" /></button>
          </Variant>
        </Experiment>
      </td>
    </tr>
)}

If specified, the notifyDisplay field will call the registered url to notify Izanami that the current variant is displayed.

You have to call yourself Izanami when a variant won because the react client can't decide this for you :).

In this example, the variant won if the client click on the button. For that we will do an http POST on /api/izanami/experiments/won when the client click on the link using this function :

export function notifyWon(key) {
  return fetch(`/api/izanami/experiments/won?experiment=${key}`, {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  });
}

and then when the client click on the link:

onTodosClick = () => {
  Service.notifyWon("izanami:example:button");
};