Developer Docs React4xp Refactored Layouts

Layouts

Layouts are essentially parts, with an extra trick up their sleve. Regions. This means that layouts may host other components, and build rich page structures.

Task: Add layout to your application

Adding layouts is more or less identical to pages and parts. Simply follow the steps below:

Add the `2-column`layout to your application:

/src/main/resources/react4xp/components/layouts/TwoColumn.tsx

import {Layout} from '@enonic/react-components';
import React from 'react'
import styles from './TwoColumn.module.css';


export const TwoColumnLayout = (props: any,) => {

    return (
        <>
            <Layout className={styles.row} {...props}>
            </Layout>
        </>
    );
};

Add the 2-column processor to your application:

/src/main/resources/react4xp/components/layouts/TwoColumnProcessor.ts

import {LayoutComponent} from '@enonic-types/core';
import type {ComponentProcessorFunction} from '@enonic-types/lib-react4xp/DataFetcher';


export const layoutProcessor: ComponentProcessorFunction<'com.enonic.app.hmdb:2-column'> = ({component}) => {
    const {regions} = component as LayoutComponent;

    if (!regions.left) {
        regions.left = {
            name: "left",
            components: []
        }
    }

    if (!regions.right) {
        regions.right = {
            name: "right",
            components: []
        }
    }

    return {
        regions: regions,
    };
};

Add the 2-column CSS module to your application:

/src/main/resources/react4xp/components/layouts/TwoColumn.module.css

.row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.row :global(> div) {
  flex: 1;
  min-width: 200px;
}

.row :global(.xp-page-editor-region-placeholder) {
  margin-bottom: 0;
}

Add the 2-column layout to your component registry and data fetcher:

/src/main/resources/react4xp/componentRegistry.ts

import {TwoColumnLayout} from './components/layouts/TwoColumn';

...

export const componentRegistry = new ComponentRegistry();

...

componentRegistry.addLayout('com.enonic.app.hmdb:2-column', {View: TwoColumnLayout});

/src/main/resources/react4xp/dataFetcher.ts

import {layoutProcessor} from './components/layouts/TwoColumnProcessor';

...

export const dataFetcher = new DataFetcher();

...

dataFetcher.addLayout('com.enonic.app.hmdb:2-column', {processor: layoutProcessor});

Now you should be able to see something like this:

By combining layout, part and text we are starting to see the potential of the page editor:

In the next chapter we will look into page templates. Page templates allow us to reuse a page definition across multiple content items.

Layouts

Contents

Task: Add layout to your application

Contents

Contents