AEM 6560 - SPA Editor Container Class as React SPA Functional Component | AEM Community Blog Seeding

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,204 likes

Total Posts

6,402 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,204 likes

Total Posts

6,402 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

28-10-2020

BlogImage.jpg

AEM 6560 - SPA Editor Container Class as React SPA Functional Component by Sreekanth Choudry Nalabotu

Abstract

Goal
React hooks are not allowed in class components. This post is for using hooks in AEM Editable Component Container coded as a Class. In the following example we use Material UI useMediaQuery hook in a AEM SPA Editable Component for setting breakpoint specific background height...

import React, { FC, useState, useEffect, Component, ComponentType } from "react";
import CSS from 'csstype';
import { MapTo, Container } from "@adobe/cq-react-editable-components";
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { useTheme, createMuiTheme } from '@material-ui/core/styles';

enum BREAKPOINT {
XS = 0,
SM = 768,
MD = 992,
LG = 1200,
XL = 1600
}

const eaemTheme = createMuiTheme({
breakpoints: {
values: {
xs: BREAKPOINT.XS,
sm: BREAKPOINT.SM,
md: BREAKPOINT.MD,
lg: BREAKPOINT.LG,
xl: BREAKPOINT.XL
}
}
});

interface EAEMContainerPropTypes {
containerProps: any,
childComponents: any,
placeholderComponent: any
}

const EAEMContainerWrapper = (Component: React.FC) => class EAEMContainer extends Container<any, any> {
props: any

constructor(props: any) {
super(props);
this.props = props;
}

render() {
return (


);
}
}

const EAEMPositioningContainer: FC = ({ containerProps, childComponents, placeholderComponent, ...props }) => {
let height = "500px";

//cannot use conditional if-else statements with React hooks
let matches = useMediaQuery(eaemTheme.breakpoints.down('md'));

if (matches) {
height = "300px";
}

matches = useMediaQuery(eaemTheme.breakpoints.down('sm'));

if (matches) {
height = "100px";
}

containerProps.style = {
height: height,
"background-color" : "yellow"
}

return (
{childComponents} {placeholderComponent}
);
};

export default MapTo("eaem-sites-spa-how-to-react/components/positioning-container")(
EAEMContainerWrapper(EAEMPositioningContainer)
);

Read Full Blog

AEM 6560 - SPA Editor Container Class as React SPA Functional Component

Q&A

Please use this thread to ask the related questions.