Nominal Pizza Masticator
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

This package has been deprecated

Author message:

WARNING: This project has been renamed to react-sticky-nav. Install using react-sticky-nav instead.

app-bar

2.4.0 • Public • Published

app-bar

An App Bar for React that stays out of your way.

When the scrolling is just right

Also known as a Header, a Navigation Bar, or a Navbar. I chose App Bar because it was available on npm.

npm · GitLab

pipeline status

Requirements

  • React
  • Something to style the <AppBar /> with, like styled-components or emotion
  • window.requestAnimationFrame. You could use a polyfill for older browsers
  • position: sticky; support. For Safari, you should add position: -webkit-sticky; to your own styles. Unfortunately this is not possible to support with React's inline style syntax.

Usage

Basic

// @jsx jsx
 
import React from "react";
import { css, jsx } from "@emotion/core";
import Navigation from "app-bar";
 
import { HamburgerMenu, Logo } from "./components";
 
...
 
const styles = css`
  background-color: white;
  box-shadow: ${open ? "none" : "0 1px 2px rgba(0, 0, 0, 0.08)"};
  height: 64px;
  position: -webkit-sticky /* This is needed for Safari support */
`;
 
...
 
ReactDOM.render(
  <Navigation css={styles} disabled={open}>
    <Logo />
    <HamburgerMenu open={open} />
  </Navigation>,
  document.getElementById("#root")
);

Render Prop

To use <AppBar />'s current position (hidden, pinned, or unfixed) in its children, you can supply <AppBar / a render function as its child:

const SizableLogo = styled(Logo)(props => ({
  height: props.large ? "128px" : "64px"
}));
 
ReactDOM.render(
  <Navigation css={styles} disabled={open}>
    {position => (
      <>
        <SizableLogo large={!open && position === "unfixed"} />
        <HamburgerMenu open={open} />
      </>
    )}
  </Navigation>,
  document.getElementById("#root")
);

Styling

The app-bar comes with very little defaults, and should be styled by supplying it with a className property that is attached some CSS.

The <AppBar /> component is a <nav /> element with the following inline styles:

  display: block;
  position: sticky;
  width: 100%;

In other words, <AppBar /> is a fixed full-width element that sticks to the top of your screen. The only functionality is that <AppBar /> will move out the viewport when scrolling down, and back in when scrolling up. This is done by controlling the top CSS property.

There are three additional classes added for the different states possible:

  1. unfixed is applied when <AppBar /> doesn't touch the top of the screen but is on the page
  2. hidden is applied when <AppBar /> is fully hidden (for example, after scrolling down or reloading page when scrolled)
  3. pinned is applied when <AppBar /> scrolling up from being hidden These classes can be used for styling (see demo for example).

Disabling

If you want to disable <AppBar />'s behaviour, supply the disabled prop. When disabled, <AppBar /> will simply stick to the top of the screen.

Ref

If you need to access the dom element, you can supply your own ref from React.createRef via the ref?: React.Ref<HTMLDivElement> prop.

install

npm i app-bar

Downloadsweekly downloads

132

version

2.4.0

license

MIT

homepage

gitlab.com

repository

Gitgitlab

last publish

collaborators

  • avatar
Report a vulnerability