episerver / alloyreact

Example of using On-Page Editing with React

On-Page Edit examples in Alloy using React

Example site for showing how to use On-Page Edit together with React. Please help out by contributing more examples through PR's!

Note: You'll need CMS UI >=11.4.0 and while this is in Beta you need to enable the features.

Site login

User: cmsadmin

Password: sparr0wHawk!

Examples

Overview

• Webpack is used for transpiling React
• React components are mounted on-demand, since we don't have a single root component
• Inside /Static/react/index.js there is code which mounts a React component in any HTML container element with a data-react-component attribute
• To simplify rendering container elements, there is an HTML helper method called ReactComponentFor in /Helpers/HtmlHelpers.cs
• The HTML helper makes sure that React scripts are added to the page, whenever at least one React component should be rendered
• The script resource is defined in module.config

Rendering some number

An int property called SomeNumber has been added to the StandardPage page type. It is decorated with a UI hint called ReactNumber.

Have a look at the display template: /Views/Shared/DisplayTemplates/ReactNumber.cshtml

You'll notice the attributes used to trigger on-page editing features.

You can see it in action by on-page editing this page: http://localhost:27399/en/about-us/news-events/press-releases/

Editing a block-type property

The NewsList property of the NewsPage page type is now rendered by a React component, instead of the Razor view from the default Alloy templates.

Have a look at its display template: /Views/Shared/DisplayTemplates/PageListBlock.cshtml

You can see it in action by on-page editing this page: http://localhost:27399/en/alloy-plan/download-alloy-plan/

Editing a content that has a dynamic DOM

The block type ThreeKeyFactsBlock is rendered as a React component and the user can select what properties to be shown. This requires that the On Page Edit mode (OPE) can update the property overlays so that the editor is editing the correct properties.

Have a look at the component: /Static/react/ThreeKeyFacts.jsx

To see it in action you need to create a block of type ThreeKeyFactsBlock.

Noteworthy files

• /Static/react/index.js
• /Static/react/ReactNumber.jsx
• /Static/react/PageListBlock.jsx
• /Static/react/ThreeKeyFacts.jsx
• /Views/Shared/DisplayTemplates/ReactNumber.cshtml
• /Views/Shared/DisplayTemplates/PageListBlock.cshtml

Tip

The first commit ("Initial checkin") to this repo is a standard Alloy website. If you compare to the first commit, you'll be able to see what was added or changed for these examples.

alloyreact's Issues

No code added 😱

Consider using MutationObserver

Reading https://world.episerver.com/blogs/john-philip-johansson/dates/2017/12/taking-more-control-of-client-side-rendering-in-ope-beta2/ i'm wondering if the detection couldn't be solved by using a MutationObserver.

You can use it to keep track of all nodes with data-epi-property-name, even if they are dynamically added. It can also monitor for changes to data (Like if it's changed with content-editable), but i think reading the value when opening the overlay would make sense/reduce the performance overhead.

Very basic example of how MutationObserver could detect changes: