https://github.com/itsdouges/react-sticky-header

🍯 A sticky header for React.js
https://github.com/itsdouges/react-sticky-header

gw2armory header javascript react react-sticky reactjs sticky

Last synced: about 1 month ago
JSON representation

🍯 A sticky header for React.js

• Host: GitHub
• URL: https://github.com/itsdouges/react-sticky-header
• Owner: itsdouges
• License: mit
• Archived: true
• Created: 2017-04-10T12:12:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-08T06:43:02.000Z (about 6 years ago)
• Last Synced: 2024-09-18T19:54:16.354Z (about 2 months ago)
• Topics: gw2armory, header, javascript, react, react-sticky, reactjs, sticky
• Language: JavaScript
• Homepage:
• Size: 7.2 MB
• Stars: 54
• Watchers: 3
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [react-sticky-header](https://github.com/madou/react-sticky-header)

[![NPM version](http://img.shields.io/npm/v/react-sticky-header.svg?style=flat-square)](https://www.npmjs.com/package/react-sticky-header)

[![NPM downloads](http://img.shields.io/npm/dm/react-sticky-header.svg?style=flat-square)](https://www.npmjs.com/package/react-sticky-header)

[![Build Status](http://img.shields.io/travis/madou/react-sticky-header/master.svg?style=flat-square)](https://travis-ci.org/madou/react-sticky-header)

[![codecov](https://codecov.io/gh/madou/react-sticky-header/branch/master/graph/badge.svg)](https://codecov.io/gh/madou/react-sticky-header)

[![Dependency Status](http://img.shields.io/david/madou/react-sticky-header.svg?style=flat-square)](https://david-dm.org/madou/react-sticky-header)

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](https://gw2armory.com).



  



## Installation

```sh

npm install react-sticky-header

```

## Usage

```javascript

// 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 = () => (

  

        
ReactStickyHeader


        


          
When

          
Why

          
About

        

      

    }

  >

    

      


        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.

      

    

  

);

```


| 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/`.

```bash

npm start

```

### Testing

```bash

npm test

```