Header

Introduction

The AppHeader component is a required part of every application built on the Commure platform. The header is a "connected component," with asynchronous logic to fetch and display the name of the authenticated user. For applications with multiple pages, the AppHeader can be used for navigation.

Examples

Hello World
Edit code

Usage

AppHeader

1import React from "react";
2import { AppHeader } from "@commure/components-core";
3import logoSvg from "../assets/logoSvg.svg";
4
5const MyAppHeader = () => (
6  <AppHeader
7    showFullUserName={false}
8    appName="Hello World"
9    logo={<img src={logoSvg} />}
10  />
11);
12
13export default MyAppHeader;

---

API Reference

AppHeader

Prop Name	Required?	Type	Description
appName	false	string	Name of your app that you'd like to show up at the top of the screen.
children	false	React.ReactNode	These children get rendered on the left side of the header
logo	false	React.ReactNode	React node that renders your logo next to your app's name.
showFullUserName	false	boolean	If true, won't truncate the user's name if it runs out of space.

Related Reading

Application Layout Guidelines