Author component inside pure React component

[alvaroalves]

Hi,

I have recently begun implementing a project using AEM 6.5 and React. Since this integration is fairly recent, and vastly different from our previous experiences with AEM, we followed the documentation and the example project closely to grasp the methodology of leveraging AEMs functionality with React.

Still, after successfully experimenting implementing core components, building our own custom authored components and pure React components, we reached a standstill trying to integrate an authored component inside a pure React component.

The use case is as follows:

1. You have some component that contains other components
2. Most of these components are pure business components, so no need for authoring capabilities in them
3. One of this business components should contain an authored component (or a parsys so we can inject any component)

How is it possible to use this component inside React, that is, how can we fetch the props that come in the model.json?

We find it rather limiting that such use cases, that are very common, don't have a straightforward, so we are reaching out so we can figure out how to mitigate this issue.

Thanks for your help.

Best regards,

Álvaro Alves

[viveksachdeva · Accepted solution]

We had same struggle when started working on AEM + React. Some of the pain points:

- Container components --> Include Parsys/Layout Grid within a component for complex components like -- Tab, Accordion, etc

- Experience Fragment --> OOTB experience fragment doesn't allow authoring of React Components

Without these features, the dialogs becomes quite messy and not really flexible/reusable. Form my learnings, here is what you can try for container components:

•  If your parent component doesn't have any configuration/authoring options : This one is slightly easier. In component JS, extend ResponsiveGrid and include childComponents. Here is how it will look like:

class <YourContainer> extends ResponsiveGrid {
render() {
    return (
        <div>
          {super.childComponents}
          {super.placeholderComponent}
        </div>

    )
  }
}

This should take care of giving you a parsys so you can drop any component within container. Maybe use it for Fixed Column Control Configurations if needed.

• When you have authorable options in parent component. More often than not, you would need field for container. For that, in addition to the JS change above, you have to change the way ComponentExporter is written. Instead of using ComponentExporter interface, extend ResponsiveGrid class. So it will look something like:

public class <YourContainer> extends ResponsiveGrid {
	static final String RESOURCE_TYPE = "<your-component-reource-type>";

@ValueMapValue
private String <containerProp1>;

@ValueMapValue
private String <containerProp2>;

}

Note : It is not advisable to extend ResponsiveGrid. So you will see warnings in Sonar tests if you are using AMS.  

I had to write a blog with details on it but not able to get to it Hope this one helps!!

[alvaroalves]

Thanks for your help!

[alvaroalves]

Is it possible to do this with functional components instead class components?

[viveksachdeva]

I doubt you can because it needs extending class..

[kautuk_sahni]

Excellent reply.