Skip to content

NREL/NREL-Branding-React-NPM-Package

Repository files navigation

NREL-branding

NREL branding 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

Menu

The nav bar menu used to either navigate through the current application, link to external sites or for Auth.

  <Menu>
    <MenuLink to="/route">Link Title</MenuLink>
    <ExternalMenuLink to="https://nrel.gov">NREL Homepage</ExternalMenuLink>
    <MenuSpacer />
    <CustomAuthComponent />
  </Menu>

Props

Name Type Default Description
children* node Most likely this will be a series of MenuLinks 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 Default 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 Default Description
label* string Nav button label
children* node Most likely this will be a series of MenuLinks or custom components
className string Add a class to be used for styling

* Required prop