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

Usage

AppHeader

import React from "react";
import { AppHeader } from "@commure/components-core";
import logoSvg from "../assets/logoSvg.svg";
const MyAppHeader = () => (
<AppHeader
showFullUserName={false}
appName="Hello World"
logo={<img src={logoSvg}/>}
/>
);
export default MyAppHeader;

API Reference

AppHeader

Prop NameRequired?TypeDescription
appNamefalsestringName of your app that you'd like to show up at the top of the screen.
childrenfalseReact.ReactNodeThese children get rendered on the left side of the header
logofalseReact.ReactNodeReact node that renders your logo next to your app's name.
showFullUserNamefalsebooleanIf true, won't truncate the user's name if it runs out of space.

Related Reading

Application Layout Guidelines