Adobe Experience Manager Sites & More

bangar20 · 6/12/24

I'm currently creating a component using React SPA, and I would like to know how can I insert a parsys, or something that allows me to drag a component into my component. I can't find documentation on how to do it, or how I can use Sightly inside my react component.

Thanks

abhishekanand_ · 6/12/24

Hi @bangar20 ,

Unfortunately, React SPAs in AEM don't directly support inserting Parsys or using Sightly within your React component. React handles client-side rendering, while Sightly is server-side.

If you need React and Sightly components on the same page, then probably you can try below approache

Separate Containers

Create two separate containers on your page, One container for React components (e.g., <div id="spa-root"></div>). AEM provides a "Layout Container" component specifically designed for React SPA development. This component allows you to define a layout structure within your React component and specify areas where child components can be dropped.

Another container for HTL components (e.g., <div id="responsive-root"></div>).
Inject HTL components into the second container once the React page is loaded.

View solution in original post

abhishekanand_ · 6/12/24

Hi @bangar20 ,

Unfortunately, React SPAs in AEM don't directly support inserting Parsys or using Sightly within your React component. React handles client-side rendering, while Sightly is server-side.

If you need React and Sightly components on the same page, then probably you can try below approache

Separate Containers

Create two separate containers on your page, One container for React components (e.g., <div id="spa-root"></div>). AEM provides a "Layout Container" component specifically designed for React SPA development. This component allows you to define a layout structure within your React component and specify areas where child components can be dropped.

Another container for HTL components (e.g., <div id="responsive-root"></div>).
Inject HTL components into the second container once the React page is loaded.