0.1.0 • Published 7 years ago

react-headspace v0.1.0

Weekly downloads
23
License
ISC
Repository
github
Last release
7 years ago

Travis Codecov

react-headspace

An implementation of headspace, using React.

It is a next generation web header that displays when needed, as seen on websites such as Medium.

Demo

See demo from the headspace repository.

Getting started

Install react-headspace into your project.

npm install --save react-headspace

To use, import it into your component and wrap it around your Header.

import Headspace from 'react-headspace';

const MyAwesomeHeader = () => (
  <Headspace>
    <h1>I am in the header!</h1>
  </Headspace>
);

API

PropertyDescriptionDefault
scrollTolerancenumber: How many pixels we have to scroll before we show/hide the header5
showAtBottomboolean: Should we show the header when we are on the bottom of the webpagetrue
childrennode: Your header content that will be wrappednone