Personalizer

The Personalizer is a special higher-order component which changes the component's props to the values which match the current personalized context.

It is returned from the JSS componentFactory. JSS will render this higher-order component which will, in-turn, render the underlying React component which componentName relates to.

Creating a Personalizer

The personalizer needs a few things to perform it's task.

To create one, we expose a getPersonalizer function from the personalize-react package.

The actual conversion of field values will depend on the personalization engine you are using. This is why we need the getPersonalizedProps function from the ESI package esi-jss-react.

Option 1: Wrap your componentFactory function

info

Recommended for JSS websites using ESI

We recommend you wrap your componentFactory function to create a new function (higher order function) that includes the Personalizer logic.

Pass the new function to the SitecoreContext instead of the original componentFactory.

// A JavaScript function of (componentName) => React.ComponentTypeimport componentFactory from './temp/componentFactory';import {  componentFactoryWithUniformPersonalizer} from '@uniformdev/esi-jss-react';
const componentFactoryWithPersonalizer =  componentFactoryWithUniformPersonalizer(componentFactory);  // ... later, within your React code<SitecoreContext    componentFactory={componentFactoryWithPersonalizer}    layoutData={routeData}>      <Layout route={routeData.sitecore.route} /></SitecoreContext>

Option 2: Create a React Component

If the componentFactory wrapper does not support your needs then you can create a Personalizer react component and use it directly.

import { getPersonalizer } from '@uniformdev/personalize-react';import { getPersonalizedProps } from '@uniformdev/esi-jss-react';
// A JavaScript function of (componentName) => React.ComponentTypeimport componentFactory from './src/componentFactory'
const Personalizer = getPersonalizer({  getPersonalizedProps,  componentFactory,});

Component Factory

The Personalizer uses a componentFactory function to access the React component to send the updated props to.

This function is given the name of the component and should return a React ComponentType.

type ComponentFactory = (componentName: string) => ComponentType;

Allowed components

You can optionally pass an array of component names. This is an explicit way of only personalizing these components.

info

If this array is undefined or empty the personalizer will wrap every component.

Personalized Props

The Personalizer component deals with the personalization lifecycle but the field values could be transformed based on different engines.

In the example above we are using ESI and so pass getPersonalizedProps from that package.

Components (deprecated: use componentFactory)

The Personalizer uses a JavaScript Map to access the React component to send the updated props to.