Developer Docs React4xp Refactored App Layout

Rendering a person

In this chapter you will add footer components.

A footer component is like an autograph, it is a signature of the author. It is a good idea to add a footer component to your application. The footer component will be added to all pages in the application.

Footer component

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>
                {`© ${new Date().getFullYear()}, Built with `}
                <a href="https://reactjs.org">React</a>
                {` and Powered by `}
                <a href="https://enonic.com">Enonic XP</a>
            </p>
        </div>
        {/* Render logo if available */}
        {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: 100vw;
  text-align: center;
  background-color: black;
  position: absolute;
  left: 0;
  font-size: 18px;
  height: 7vh;
  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;
}

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

.logoContainer img {
  max-height: 3.5vh;
  max-width: 2.6vh;
}

Add the footer to your app:

react4xp/entries/App.tsx

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

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

App.displayName = 'App';

export default App;

Global CSS

You might notice the placement is a bit off, this is because we need some general styling. 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;
}

.back {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;

  a {
    color: #EF82F0;
    text-decoration: none;
  }

  p {
    margin: 0;
    background-color: #071622;
    padding-inline: 0.2rem;
    font-size: 1.6rem;
    font-weight: bolder;
    border-bottom-right-radius: 5px;
  }
}

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

Asset URL

Lastly we need to be able to display our cool React4XP logo! To do this we use assetUrl which is a function that generates a URL pointing to a static file.

Update your app.ts in your site directory to include assetUrl and define a prop for it:

react4xp/site/app.ts

import {assetUrl} from '/lib/enonic/asset';

...

export function get(request: Request): Response {
    const url = assetUrl({path: 'images/React4XP.svg'});
...

    const props: AppProps = {
        component,
        url
    }
...

define prop for the url:

react4xp/types/AppProps.ts

import type {RenderableComponent} from '@enonic/react-components';

export interface AppProps {
    component: RenderableComponent,
    url?: string
}

Sweet! Now we have a footer component that is displayed on all pages in the application. The footer component is styled with a CSS module, and the global CSS file is used to style the app.

You are on a roll, next - lets look into Rich text.

Rendering a person

Contents

Footer component

CSS module

Global CSS

Asset URL

Next

Contents

Contents