Norvell's Public Machinations

    react-headspace

    0.1.0 • Public • Published

    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

    Property Description Default
    scrollTolerance number: How many pixels we have to scroll before we show/hide the header 5
    showAtBottom boolean: Should we show the header when we are on the bottom of the webpage true
    children node: Your header content that will be wrapped none

    Install

    npm i react-headspace

    DownloadsWeekly Downloads

    22

    Version

    0.1.0

    License

    ISC

    Last publish

    Collaborators

    • avatar