Nrel-branding-react NPM

NREL-branding

NREL branding components

NREL-branding
- Installation
- Components

Installation

npm i nrel-branding-react

Find this on the NPM registry at https://www.npmjs.com/package/nrel-branding-react

Components

Header

The header component is a wrapper component that can be passed React components as children. Most commonly, this will be passed the Menu component included in this package along with it's corresponding children.

  <Header appTitle="NREL Application Title">
    <Menu>
      <MenuLink to="/route">Link Title</MenuLink>
      <MenuLink to="/another-route">Another Link Title</MenuLink>
    </Menu>
  </Header>

Props

Name	Type	Default	Description
appTitle*	node		The title of the application
className	string		Add a class to be used for styling
logoSrc	string	NREL blue logo	The source of the logo image file. This should probably live in the public dir of the app
children	node		The nav bar. In general, this will be the `menu` component from this library
noStick	boolean	false	Boolean determining if the menu bar should not be sticky to the top of the page
isSlim	boolean	false	Boolean for slimmer headers. Mostly used dynamically for data-viewer pages
hasMobileNav	boolean	false	Boolean used to turn on a mobile nav when in mobile resolutions

* Required prop

Footer

The footer component to be set at the bottom of the page.

  <Footer />

Props

Name	Type	Default	Description
className	string		Add a class to be used for styling

Name	Type	Default	Description
children*	node		Most likely this will be a series of `MenuLink`s or custom components
className	string		Add a class to be used for styling
isSubMenu	boolean	false	Boolean saying if the parent is the sub menu or a main menu
noStick	boolean	false	Boolean determining if the menu bar should not be sticky to the top of the page
scrollContainerId	string		css selector id of container where scroll events occur on the dom. Used to apply the sticky class to the nav bar

* Required prop

ExternalMenuLink

A navbar link to visit an external site

  <ExternalMenuLink to="https://nrel.gov">NREL</ExternalMenuLink>

Props

Name	Type	Description
to*	URL	Link destination
children*	node	JSX of HTML elements, or in most cases just label text
alt	string	the link title (similar to an image alt tag)
className	string	Add a class to be used for styling

* Required prop

MenuLink

A navbar link to visit an site

  <MenuLink to="/data-viewer">Data Viewer</MenuLink>

Props

Name	Type	Default	Description
to*	URL		Link destination
children*	node		JSX of HTML elements, or in most cases just label text
className	string		Add a class to be used for styling
isCurrent	bool	false	Whether or not this is active, default (undefined) will infer from the current path

* Required prop

MenuSpacer

Adds space between menu items. Generally used between nav buttons on the left of the nav bar and the auth buttons on the right.

  <MenuSpacer />

SubMenu

A dropdown menu to show multiple links under one nav bar label.

  <SubMenu label="Key Findings">
    <MenuLink to="/key-findings/scenarios">Scenarios</MenuLink>
    <MenuLink to="/key-findings/topics">Topics</MenuLink>
  </SubMenu>

Props

Name	Type	Description
label*	string	Nav button label
children*	node	Most likely this will be a series of `MenuLink`s or custom components
className	string	Add a class to be used for styling