Nervous Penpal Message
Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »

@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.

Install

npm i @trend/topbar

DownloadsWeekly Downloads

1

Version

0.6.0

License

MIT

Unpacked Size

34.9 kB

Total Files

15

Last publish

Collaborators

  • avatar