Developer Docs React4xp Refactored Layouts

Layouts

Layouts are essentially parts, with regions

Introduction

Where parts are "leaf" components, layouts support nesting of components - similar to how pages work.

Unsurprisingly, HMDB already contains sample pages that uses layouts, specifically a 2-column layout.

Task: Add layout rendering

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

Add the 2-column layout files:

/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}/>
    );
};

/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;

    return {
        regions: regions,
    };
};

/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;
}

Register the component and processor:

/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});

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

== Optional task: Build a page from scratch

Try building your own page from scratch, using the various components you now have available.

Create a new folder in the site structure, expand the preview panel and start creating.

When adding an empty layout, it will look something like this:

Wrapping up pages, we’ll have a look at page templates.

Layouts

Contents

Introduction

Task: Add layout rendering

Contents

Contents