React-Recommender¶

Quick Start¶

npm install --save react-recommender

This is a full example. It optimizes the displayed message (“Hello World” or “Hello You”) based on which option better achieves the objective: making the user click the button.

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

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

<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>

Resources¶

How To Build A Self-Improving React App–It is easier than you might think

Contents