react-sticky-header

Lightweight sticky header made for React that works with both colours and images.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-sticky-header
5470.2.04 years ago6 years agoMinified + gzip package size for react-sticky-header in KB

Readme

NPM version NPM downloads Build Status codecov Dependency Status
Lightweight sticky header made for React that works with both colours and images. You can see an example implementation over at Guild Wars 2 Armory.

Installation

npm install react-sticky-header

Usage

// Import the base CSS, if you're using webpack just import them straight.
// Else import them into your base CSS.
import 'react-sticky-header/styles.css';
import StickyHeader from 'react-sticky-header';

const MyHeader = () => (
  <StickyHeader
    // This is the sticky part of the header.
    header={
      <div className="Header_root">
        <h1 className="Header_title">ReactStickyHeader</h1>

        <ul className="Header_links">
          <li className="Header_link">When</li>
          <li className="Header_link">Why</li>
          <li className="Header_link">About</li>
        </ul>
      </div>
    }
  >
    <section>
      <p>
        This section will be what the sticky header scrolls over before entering into
        sticky state. See the gif above or run the test story book to see examples.
      </p>
    </section>
  </StickyHeader>
);

| prop | type | required | description | |-|-|-|-| | header | Children | yes | A react element that will be the sticky part of the header. | | children | Children | no | Elements that you want to appear under the sticky header. | | headerOnly | boolean | no | Use this to force the header into "sticky" mode. It will automatically hide the children and calculate the height spacer for header. | | onSticky | (boolean) => void | no | Callback fired when the header enters/leaves sticky state. See Sticky State section. | | backgroundImage | string | no | Self explanatory. | | backgroundColor | string | no | Self explanatory. | | className | string | no | Self explanatory. | | stickyOffset | number | no | The number to offset the sticky header. |

Sticky State

When the component enters sticky state, it will add a class name is-sticky to the root element of the header.

React Story Book

To run the component in various states, run the following command then go to http://localhost:6006/.
npm start

Testing

npm test