How to create a custom container component with functional component in React and AEM Cloud SDK

[caiosheperd]

Hey people, so I'm trying to create a custom container component with responsive grid or parsys inside of it, so I can have a dialog to change the container background color and still be able to put others custom components inside the container. I tried several tutorials but had no success, could someone help me on doing this custom container component using the functional components in React and the latest AEM Cloud SDK?

[Raja_Reddy · Accepted solution]

Hi @caiosheperd 

Set up your development environment:

Install Node.js and npm.
Install the AEM Cloud SDK CLI.
Create a new project using the AEM Cloud SDK CLI:

aem-sdk init
shell
Create a new functional component for your custom container:

Create a new file called CustomContainer.js in the src/components directory.
Implement your custom container component using functional components and hooks. Here's an example:
import React from 'react';

const CustomContainer = ({ backgroundColor, children }) => {
const containerStyle = {
backgroundColor: backgroundColor || 'transparent',
padding: '20px',
};

return <div style={containerStyle}>{children}</div>;
};

export default CustomContainer;
jsx
Create a dialog for your custom container:

Create a new file called CustomContainerDialog.js in the src/dialogs directory.
Implement your dialog using the Coral UI components. Here's an example:
import React from 'react';
import { Dialog, TextField } from '@adobe/react-spectrum';

const CustomContainerDialog = ({ isOpen, onClose, onChangeBackgroundColor, backgroundColor }) => {
return (
<Dialog isOpen={isOpen} onClose={onClose}>
<TextField
label="Background Color"
value={backgroundColor}
onChange={onChangeBackgroundColor}
/>
</Dialog>
);
};

export default CustomContainerDialog;
jsx
Use your custom container component in a page:

In your page component, import and use your custom container component. Here's an example:
import React, { useState } from 'react';
import CustomContainer from '../components/CustomContainer';

const MyPage = () => {
const [backgroundColor, setBackgroundColor] = useState('`#ffffff`');

const handleBackgroundColorChange = (value) => {
setBackgroundColor(value);
};

return (
<div>
<CustomContainer backgroundColor={backgroundColor}>
{/* Add your custom components here */}
</CustomContainer>
</div>
);
};

export default MyPage;
jsx

Build and deploy your project:

Run npm run build to build your project.
Deploy the built project to AEM using the AEM Cloud SDK CLI.

Please refer 
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/cont... 
https://github.com/adobe/aem-project-archetype/issues/415 

[kautuk_sahni]

@caiosheperd Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.