We’ve been using the Bloomreach React SDK in our codebase for a while now and noticed that many redundant div elements are rendered, preventing us from styling our components correctly.
After some investigation, I found that the BrContainerBox is responsible for adding these divs.
The code can be found here:
Attached is a screenshot to show the added div elements on the page:
Is it possible to only render the divs in the experience manager and use a React.Fragment for the “production” site? Or can we override the default behavior of BrContainerBox with a property or some sort of Bloomreach configuration?
I’m looking forward to your reply!
With kind regards,
Peter van Meijgaard
Lead Frontend Developer @ ANWB
The way the container gets rendered is determined by xtype property on the channel editor component.
Based on the xtype value, the React SDK will determine how to render the container. For example, setting xtype=hst.nomarkup will render a fragment with only the child components.
export function BrContainerNoMarkup({ children }: React.PropsWithChildren<BrProps>): JSX.Element {
return <>{children}</>;
}
Indeed, changing the xtype of the container to nomarkup would solve the issue. Then you would have to change that through the cms console though, which can be a lot of work if you already have a lot of config in production. If you also want the hst.vbox container type to not render extra divs and you are sure you will never need it to render extra divs, you can change the mapping of the container type, the same way you map you own components:
I’ve asked our Bloomreach developers and we’re going to see if switching to xtype=hst.nomarkup is indeed a workable solution for us.
Another question though. In the documentation I read that by switching to hst.nomarkup, it’s now necessary to include a custom element in the container component (<@hst.include ref="nomarkup-container"/>) and an extra CSS class for container items (nomarkup-container-item-root).
Is still needed for the components being rendered by the React SDK and the BrManageContentButton is being used?
I looked at the documentation about this functionality, but couldn’t find it anywhere and it seems that no extra HTML elements are added to the code of the example projects using the React Bloomreach SDK.
I’m not a part of the Bloomreach team or anything, but I’ve ran into this issue myself before so thought I would help But I’m pretty sure you don’t need to add these extra elements if you’re using the React Sdk, we also use the nomarkup containers and we didn’t have to add these elements.
But I’m pretty sure you don’t need to add these extra elements if you’re using the React Sdk, we also use the nomarkup containers and we didn’t have to add these elements.