React-recommender NPM

react-recommender

A recommender system for React

Building a self-improving React app is not as hard as you think. We can build one with a few lines of code.

Install

npm install --save react-recommender

Usage

The following listing is a complete example. Each render, it displays the option ("Hello World" or "Hello You") that has the best chance to achieve the purpose: Make the user click the button.

import react from 'react';
import ReactDOM from 'react-dom'

import Recommender, { Recommend, Option, withObjective } from 'react-recommender';

const Objective = withObjective(({onAchieved, ...props}) => <button onClick={(evt)=> onAchieved("OptimizeClicks")}>Click Me</button>);

ReactDOM.render(
  <Recommender accountId="mail@react-architect.com">
      <div>
          <Recommend
              mode="egreedy"
              epsilon={0.1}
              objectiveId="OptimizeClicks"
              options={[
                <Option id="helloWorld">
                  <div>Hello World</div>
                </Option>,
                <Option id="helloYou">
                  <div>Hello You</div>
                </Option>
              ]}>{
                  ({loading, recommendation, error, renderOption}) => {
                      return (loading && <div>Loading</div>) ||
                          (recommendation ? renderOption(recommendation) : <div>Error</div>)
                  }
              }</Recommend>

          <Objective />
      </div>
  </Recommender>,
  document.getElementById('root')
);