Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

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

kautuk_sahni
Community Manager
Community Manager

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.

AEM AEMEBlogSeeding Experience Manager
0 Replies