@placardi/header

A header is a component that combines branding and some useful functionality.

Installation

npm i @placardi/header

Dependencies

• react
• styled-components
• @placardi/theme

Usage

Basic usage

In order to use the header component, wrap the application in global theme provider from @placardi/theme. Then, use the header as any regular component. Header has support for slots (i.e. logo and avatar) that accept arbitrary child nodes.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Header, { LogoSlot, AvatarSlot } from '@placardi/header';

const App: FC = () => (
  <ThemeProvider>
    <Header>
      <LogoSlot>Greetings!</LogoSlot>
      <AvatarSlot>JD</AvatarSlot>
    </Header>
  </ThemeProvider>
)

export default App;