Expand my Community achievements bar.

SOLVED

How to include parsys in my aem react spa component

Avatar

Level 2

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

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 7

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

3 Replies

Avatar

Correct answer by
Level 7

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.