React custom component with props in cif-venia project | Community
Skip to main content
M
mrkumar82
Level 2
December 13, 2021

React custom component with props in cif-venia project

  • December 13, 2021
  • 3 replies
  • 1882 views

I have created a project using Venia, there are no issues with CIF component, working just fine,

 

I have to create some custom components for which I want to use React js, but not sure how to pass the data to react component as props. I dont want to make an API calls for each and every components to get the component data.

 

The way I am looking for is like WKND project where you hae Mapto to map the components between AEM and React can get data from props.

 

I tried react habitat which works only with class components not with functional component.

 

Thanks

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    3 replies

    milind_bachani
    Adobe Employee
    milind_bachaniAdobe Employee
    Adobe Employee
    December 13, 2021

    Hi @mrkumar82 ,

    The ask here sounds a little vague to me, can you please elaborate on the requirement ?

    If you are expecting the authored values in AEM component to passed to react, you can simply use a model class to achieve the same.
    Refer link for tutorial : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/custom-component.html?lang=en

    If our each component is expecting a dynamic value and you are expecting data from some PIM or by some external APIs, you can use slices and call every API needed during session start (or first load) and store it in ReduxStore and then directly use the responses stored in reduxStore in your react component(works for both functional & class).

      M
      mrkumar82Author
      Level 2
      December 13, 2021

      Hi @milind_bachani ,

       

      Thanks for your reply.

      The project I mentioned above is not a spa, its a clone of Venia project using CIF components, here the react component are rendered using invididual id's, and this is not a spa.

       

      first this is not a spa project, I want something like this https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/map-components.html?lang=en but without making an api call to http://localhost:4502/content/wknd-spa-react/us/en.model.json but receive the data as a props using Mapto, is that possible.

      MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

       

      Simply I want create a project with AEM Project Archetype with React where i want to use CIF components which doesnt work.

        Pavan_Kalyan-1
        Pavan_Kalyan-1
        Level 3
        December 13, 2021

        hello @mrkumar82 

        as per my understanding 

        How to integrate AEM with Magento e-Commerce platform through CIF framework - YouTube

        this could give an overview on how to integrate your react custom component with props in cif-venia project.

        comment if this doesn't work.

          S
          sudhas84340876
          December 13, 2021

          @pavan_kalyan-1 @milind_bachani 

          The project is not built out of react frontend module and it is not a spa project , its created using mvn archytype with frontend module as general and includeCommerce=y, using CIF framework.so is it possible to create custom aem react component using mapto Function since this is not a complete spa. 

           

          The requirment is to use the spa editors in aem for cif components using mapto functionality. 

          is CIF components are compatible with spa editors in AEM?

          Please let know if you have such examples created.

            M
            mrkumar82Author
            Level 2
            December 16, 2021

            Any idea on the above requirement

              Eduardosorbor
              Eduardosorbor
              Level 2
              July 2, 2022

              Hi, I am having the same issue. I have tried a lot of solutions and I dit not have success. I did not find any internet material about this topic. We are using AEM Venia Demo (https://github.com/adobe/aem-cif-guides-venia) and we cannot create a React.js component with props that can be editable on AEM dialogs. Only we can create static React.js components. Did someone already created a React.js component with the AEM Venia Demo? Please, we need solve this issue. 

              Terms & ConditionsAccessibility statement

              Loading footer...