Outlier-components NPM

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"
    },

 ]
}