		{
		"name": "app-bar",
		"version": "0.0.1-alpha.1",
		"version": "1.0.0",
		"description": "An app bar for React that stays out of your way",
		@@ -5,0 +5,0 @@ "licence": "MIT",

README.md

		@@ -12,2 +12,52 @@ # app-bar

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

		## Usage

		Basic usage:

		```javascript
		import React from 'react';
		import { css } from 'emotion';
		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;
		`;

		...

		<Navigation className={styles} disabled={open}>
		<Logo />
		<HamburgerMenu open={open} />
		</Navigation>
		```

		### 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 `<div />` element with the following inline styles:

		```css
		display: block;
		position: fixed;
		top: 0;
		width: 100%;
		```

		In other words, `<AppBar />` is a fixed full-width element at 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.

		### 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 a function via the `innerRef` prop.

app-bar - npm Package Compare versions

New alerts