Mixing React and Sightly components in a page | Community
Skip to main content
R
remakj
Level 2
June 22, 2022

Mixing React and Sightly components in a page

  • June 22, 2022
  • 3 replies
  • 2142 views

Hi All,

 

 Is there a way we can mix React and Sightly/HTL components in a same page? I tired to add HTL components in a SPA app/page and they would not even render. I guess this is expected as the React App is not aware of the HTL component and hence ignored. Is there a way where I can have 2 containers in a page where 1 allows you yo add HTL components and the other React components? 

 

Any pointers toward a solution/poc would be appreciated.

 

Thanks

Jai

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
June 22, 2022

Hi,

For the second container, you need to add the responsive grid in the page component. I think then this will work.

Arun Patidar
    R
    remakjAuthor
    Level 2
    June 22, 2022

    Because the page is mapped with React component, React handles the rendition of it and it ignores the responsive grid I added next to <div id="spa-root"></div>. If i do not map the page to react component, then the react components are not editable as the spa-root id is in a different place and the responsive grid rendered by HTL is in different place.

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      June 22, 2022

      Hi,

      If you add another div with server side rendering e.g.

      <div id="root"></div>. 
  <div id="spa-root"></div>
  <div id="responsive-root">
      component 1 response using HTL
      component 2 response using HTL

  </div>
</div> 
      Arun Patidar
        T
        Adobe Employee
        Tushar_GuptaAdobe Employee
        Adobe Employee
        June 22, 2022

        AFAIK, If you have existing AEM components, they will need to ensure those components have a sling model so that the appropriate model.json output is generated, and then also write the appropriate react/angular component that maps to that AEM component. The existing HTL will not be used as the rendering is now done client side by the SPA, not server side.

          milind_bachani
          Adobe Employee
          milind_bachaniAdobe Employee
          Adobe Employee
          June 22, 2022

          Hi @remakj ,

          This indeed is a problem and I have faced the same.

          When you use react and sightly components together, the react one always has precedence and overrides the sightly div because, react takes over the control on DOM.

          But, when you inject something once react page is loaded, it would be injected successfully.

          So, I am afraid that you can use sightly and react together.

          However, I have used ES scripting and react together, by bundling both of them seperately and having seperate parent divs of ownership and works fine.

          Hope this helps!

          Best Regards,
          Milind

            R
            remakjAuthor
            Level 2
            June 22, 2022

            Hi @milind_bachani 

             

             When you say "So, I am afraid that you can use sightly and react together." I guess you meant "you cant use sightly and react components together"?

             

            I understand having 2 divs both controlled by JS one by React and other plain JS. That makes sense though it kind of defeats my requirement to have a section rendered server side and another client side.

             

            Thanks

             

              Terms & ConditionsAccessibility statement

              Loading footer...