Nominating Presidential Muppets

    react-sticky-header

    0.2.0 • Public • Published

    react-sticky-header

    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

    Install

    npm i react-sticky-header

    DownloadsWeekly Downloads

    1,367

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    13.6 MB

    Total Files

    11

    Last publish

    Collaborators

    • madou