Outlier Components

A package of elements used across multiple Outlier websites.

Installation

npm install outlier-components

Usage

import { OutlierHeader } from 'outlier-components'
import { OutlierFooter } from 'outlier-components'

Components

OutlierHeader

OutlierHeader is a simple header component that includes core navigation, logo and optional log-in button.

Props

• headerWidth Default is 90%, you can pass most values here eg. 100px, 100vw, 100% Not required

• loginRequired Login button: requires a 'user' data object if set to true Default is false Not required

Data

• user Not required if member is false This is the user login status Data object needs at least a "loggedin" property = true/false

• menuItems Required menuItems is an object with a Primary and Secondary set of menu items Example menuItems object:

  {
   "Primary": [
      {
         "name": "Charts",
         "link": "https://charts.theoutlier.co.za"
      },
      {
         "name": "Tools",
         "link": "https://tools.theoutlier.co.za"
      },
        {
             "name": "Games",
             "link": "https://games.theoutlier.co.za"
        },
        {
             "name": "Newsletters",
             "link": "https://newsletters.theoutlier.co.za"
        }
   ],
   "Secondary": [
      {
         "name": "Local Government",
         "link": "/section/local-government"
      },
      {
         "name": "Sports",
         "link": "/section/sports"
      },
  
   ]
  }

### OutlierFooter

Current no props