@trend/topbar

0.6.0 • Public • Published

Topbar

Create a TREND topbar component.

Installation

## Has peer dependency with react and react-dom
npm install react react-dom
npm install @trend/topbar

Basic Usage

With a module bundler like webpack, use as you would anything else:

// Using ES6 modules.
@import React from 'react';
@import Topbar from 'trend-react-components/Topbar';

function Header({ children }) {
  return <Topbar fixed={true}>
    { api =>
      <header {...api.getElementProps()}>
        <div {...api.getInnerProps()}>
          <div {...api.getSectionProps({ position: 'start' })}>
            <button {...api.getIconProps({ type: 'button' })}>
              <MenuIcon />
            </button>
            <h1 {...api.getTitleProps()}>TREND Components</h1>
          </div>
          {children}
        </div>
      </header>
    }
  </Topbar>;
}

// Bare minimum markup that is required.
function AnotherTopbar() {
  return <Topbar>
    { api =>
      <header {...api.getElementProps()}>
        <div {...api.getInnerProps()}>...</div>
      </header>
    }
  </Topbar>;
}

Implementing the markup is up to the developer. The api exposes prop getters for all the pieces that make up a TREND Topbar component. This is intentional to allow the developer to choose the markup that fits best for use case.

Props:

children

function | required

Will expose the prop getter api.

className

string | options, no default

Will merge any class names passed into component directly to the getElementProps getter. Alternatively, you can just pass any class names directly to the getElementsProps({ className: '' }) getter.

compact

boolean | optional, no default

Will add the compact modifier to the className for the getElementsProps getter.

fixed

boolean | optional, no default

Will add the fixed modifier to the className for the getElementsProps getter.

fixedScroll

boolean | optional, no default

For topbars that are hidden on downward scrolls, but visible while user scrolls up.

scrollTarget

object | optional, window

The DOM node to detect scrolling on.

tall

boolean | optional, no default

Will add the tall modifier to the className for the getElementsProps getter.

Property Category Type Description
getElementProps prop getter function(props: object) Returns object of props to add to the topbar.
getInnerProps prop getter function(props: object) Returns props object to add to the inner child component.
getSectionProps prop getter function(props: object) Returns props object to add to any section child components. Pass in a optional position: <start|end> property to add section modifier.
getIconProps prop getter function(props: object) Returns props object to add to any icon child components.
getTitleProps prop getter function(props: object) Returns props object to add to the title child component.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.6.0
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.6.0
    0
  • 0.5.0
    0
  • 0.4.0
    0
  • 0.3.0
    0

Package Sidebar

Install

npm i @trend/topbar

Weekly Downloads

0

Version

0.6.0

License

MIT

Unpacked Size

34.9 kB

Total Files

15

Last publish

Collaborators

  • defo550