@algolia/predict-react NPM

Predict for React

🚧 This version is not yet production-ready.

Predict for React lets you build personalized user experiences with Algolia Predict.

Installation

Predict for React is available on the npm registry and works alongside the Predict API client (@algolia/predict) to retrieve the user profile.

yarn add @algolia/predict@alpha @algolia/predict-react
# or
npm install @algolia/predict@alpha @algolia/predict-react

Usage

import { Predict, usePredict } from '@algolia/predict-react';

function App({ userProfile }) {
  return (
    <Predict userProfile={userProfile}>
      <Page />
    </Predict>
  );
}

function Page() {
  const {
    userProfile,
    affinities,
    funnelStage,
    orderValue,
    cartAbandonment,
    segments,
    properties,
    zones,
  } = usePredict();

  return <>{/* Your JSX */}</>;
}

Continue reading our Getting Started guide.

Documentation

The documentation offers a few ways to learn about Predict for React:

Getting Started. Discover the library: fetch the user profile (on the server and on the client), personalize content with zones, inspect the user profile.
API Reference. Learn about the components and Hooks provided by the library.
Guides. Read common use cases and learn how to implement them.
Playbook. Find inspiration for your personalization use cases, and copy the templates.

You can find more on the documentation.

Inspect and debug

Personalized experiences are hard to debug because the content depends on who is browsing the app. The Predict Tools web extension lets you inspect user profiles to debug personalized apps.

Predict Tools web extension open on the Predict Storefront