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.
- Webpack is used for transpiling React
- React components are mounted on-demand, since we don't have a single root component
/Static/react/index.jsthere is code which mounts a React component in any HTML container element with a
- To simplify rendering container elements, there is an HTML helper method called
- 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
Rendering some number
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:
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
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:
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:
To see it in action you need to create a block of type
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.