How to pass rendering parameters from Sitecore to React

For some of your projects you’ll probably have a Sitecore component with a React app. Such a component normally doesn't have much logic inside your controller action, since this component only renders a container (div) element. There might also be a script tag in your view, with your React application script, but this depends on your setup. This is often the only job your Sitecore component has to do, because all the rest is handled in the front-end.
Such components make it possible to create advanced components that are a hassle to do in the backend while still making the application user-friendly. However, by using this approach some features of the Sitecore framework are lost: passing rendering parameters, personalization ,...

Why do you want it?

Rendering parameters of a Sitecore component offer a great way to change the presentation and/or functionality of a certain component by adjusting those parameters. Sitecore also made it pretty easy to create custom rendering parameters, a topic that has a lot of blogposts covering it. For that reason explaining on how to do it is out of scope of this blogpost.

Personalization is a big feature in Sitecore that enables the content editors to create rules to e.g. hide or show components, adjust the datasource,... Rendering parameters can be used in combination with personalization: by adding a certain component twice with different rendering parameter values and then hide or show the components with personalization rules.

Using those rendering parameters in the back-end is fairly easy. The only issue rises when you want to pass them to your React based Sitecore component. One could create an api to pass them, but you don't want to introduce additional latency and the parameter values should already be known when the app starts.

Passing the parameters: backend

The key to passing the rendering parameters is the html data attribute. The idea is quite simple: you add your rendering parameters as data attributes to the container (div) inside your (Razor) view and let your React application read them when the app starts.

In order to do this you’ll need to pass the parameters you require from your controller action to your view by using the view model, this is pretty straight forward. Then you’ll pass those parameters as follows:

<div
    class=”reactapp1”
    data-renderingparameter1=”value1”
    data-renderingparameter2=”value2”
/>

You can freely choose a name for your data attribute but,
as this is the HTML specification, there are two rules you need to follow:
1) A prefix of “data-“
2) No uppercase letters

Reading the parameters: front end

The next step is to read them in your React application when it starts and (preferably) store them in state. Reading them is quite easy! You just need to add following code to your application’s entry point, which is the js file where the ReactDOM.render is used to render your application into your container div. You can read the data attributes like this:

const renderingparams = {
  renderingparameter1: container.dataset.renderingparameter1,
  renderingparameter2: container.dataset.renderingparameter2,
 };

The container variable in the above code example denotes a variable holding a reference to your container DOM element. You should already have such a variable since you need it for rendering your app with ReactDOM.render. If you are passing data types other then strings you might want to parse them first. You can do this for respectively booleans and numbers like this:

    container.dataset.renderingparameter1 === ‘True’
    parseInt container.dataset.renderingparameter1, 10)

You might also want to consider using a default value when a data attribute can’t be found or parsed.

The next step is to pass them to your application as prop for example like this:

<App renderingparams={renderingparams} ..>
…
</App>

Your rendering parameters are now fully available inside your React application. I would recommend saving those parameters in your app state (by for example using context, Redux, Mobx) so you can access them everywhere that is needed without passing them as props. As this is application dependent, I’ll leave this task up to the developer.

Personalization

When you have the aforementioned structure in place, you can now personalize the component by adjusting the rendering parameters. Additionally, you can also pass personalization data to your React applications: by using the data attributes to pass xconnect data to your app.