Developer Docs React4xp Refactored Common

Application commons

In this chapter you will add global styling and a footer component to the front-end.

Global CSS

Our application looks a bit bland, let’s add the finishing touches to make it look more appealing. For this we are going to add a global CSS file, this allows us to avoid repeating general styling in each component.

Add global CSS file to the component directory:

react4xp/components/globalStyles.css

html {
  background-color: #071622;
  color: ghostwhite;
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
  padding: 0;
}

body {
  margin: 0 auto 0 auto;

}

#PageView {
  width: 100%;
}

.contentContainer > div {
  margin-bottom: calc(6vh - 16px);
  min-height: 86vh;
  padding: 8px;
  max-width: 1400px;
  padding-inline: 2.5vw;
  margin-inline: auto;
}

h1 {
  color: #0892D4;
  font-size: 3rem;
  margin: 0 0 3rem 0;
  padding-top: 3rem;
  text-align: left;
  line-height: normal;
}

h2 {
  color: #EF82F0;
  font-size: 2rem;
}

h3 {
  color: #61DBFB;
  font-size: 1.4rem;
}

a {
  color: #61DBFB;
}

img {
  object-fit: cover;
  object-position: 50% 50%;
  max-width: 1600px;
}

p {
  font-size: 22px;
}

.editor-align-justify {
  margin-inline: auto;
}

Add your global CSS file to the app:

react4xp/entries/App.tsx

import '../components/globalStyles.css';

Footer component

A footer component is like an autograph, it is a signature of the author usually visible on every page of the application.

Add the footer component within a common directory:

react4xp/components/common/Footer.tsx

import React from 'react';
import styles from './Footer.module.css';


export interface FooterProps {
    logoUrl: string;
}

const Footer = ({logoUrl}: FooterProps) => (
    <footer className={styles.footer}>
        <div className={styles.footerContainer}>
            <p>
                <span className={styles.rotateRight}>©</span>
                {` ${new Date().getFullYear()}, Built with `}
                <a href="https://reactjs.org">React4XP</a>
            </p>
        </div>
        {logoUrl && (
            <div className={styles.logoContainer}>
                <img src={logoUrl}
                     width={32}
                     height={42}
                     alt="Enonic XP logo"/>
            </div>
        )}
    </footer>
);

export default Footer;

CSS module

The footer component also has a dedicated CSS module, which allows targeted styling without conflicts with other components and classes.

Add the CSS module to the common directory:

react4xp/components/common/Footer.module.css

.footer {
  margin: 1vh auto auto auto;
  width: 100%;
  text-align: center;
  background-color: black;
  position: absolute;
  left: 0;
  font-size: 18px;
  height: 7vh;
  min-height: 45px;
  align-content: center;
}

.footer a {
  color: #61dbfb;
  text-decoration: none;
  font-weight: 500;
}

.footer a:hover {
  color: #0892D4;
  text-decoration: underline;
}

.footer p {
  margin: 0 .5rem;
}


.logoContainer {
  position: absolute;
  bottom: 1.5vh;
  right: 1.5rem;
}

.logoContainer img {
  max-width: 2.6vh;
  min-width: 20px;
  height: auto;
}

.rotateRight {
  display: inline-block;
  transform: rotate(90deg);
}

Add the footer to your app:

react4xp/entries/App.tsx

import Footer from "/react4xp/components/common/Footer";
import '../components/globalStyles.css'
import type {AppProps} from '/types/AppProps';
import {BaseComponent} from '@enonic/react-components';
import * as React from 'react';
import {componentRegistry} from '../componentRegistry';

const App: React.FC<AppProps> = (props) => {
    return (
        <>
            <BaseComponent componentRegistry={componentRegistry} data={props}/>
            {
                (props.type == "page" || props.type == "contentType") &&
                <Footer logoUrl={props.commonProps.logoUrl as string}/>
            }
        </>
    );
}

App.displayName = 'App';

export default App;

Asset URL

Lastly we need to be able to display a logo in the footer! To do this we use assetUrl() which is a function that generates a URL pointing to a static file.

You might have noticed that the footer component does not have its own processor as it is a static component, we need to add a commonProcessor to the app to provide the assetUrl function. You can also add other common functions here if needed.

react4xp/components/common/CommonProcessor.ts

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

export const commonProcessor: ComponentProcessorFunction<'com.enonic.app.hmdb:main'> = (props) => {

    const logoUrl = assetUrl({path: 'images/React4XP.svg'});

    return {
        logoUrl
    };
};

Lastly add the common processor to the data fetcher:

react4xp/dataFetcher.ts

import {DataFetcher} from '/lib/enonic/react4xp';
import {commonProcessor} from '/react4xp/components/common/CommonProcessor';
import {helloProcessor} from './components/HelloProcessor';

export const dataFetcher = new DataFetcher();
dataFetcher.addContentType('portal:site', {processor: helloProcessor});
dataFetcher.addCommon({processor: commonProcessor});

Sweet! Now we have a footer component that is visible on all pages in the application, and it is styled using a CSS module.

You are on a roll, in the next chapter we’ll be rendering content.

Application commons

Contents

Global CSS

Footer component

CSS module

Asset URL

Next

Contents

Contents