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

[kautuk_sahni]

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.