Wondering what’s next for npm?Check out our public roadmap! »

    react-izanami

    1.9.0-BETA1 • Public • Published

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

    Keywords

    none

    Install

    npm i react-izanami

    DownloadsWeekly Downloads

    156

    Version

    1.9.0-BETA1

    License

    Apache-2.0

    Unpacked Size

    67.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar