npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-sticky-heading

v1.0.0

Published

ReactStickyHeadroom is a React Component for hiding the header when scrolling.

Downloads

10

Readme

ReactStickyHeadroom

npm badge

ReactStickyHeadroom is a React component, that hides your header when you scroll down and shows it once you're scrolling up again. It's designed for best performance and can only be used if you know the height of your header component (or more precisely the amount of pixels you want ReactStickyHeadroom to hide). This helps us avoid calculating the height ourselves and therefore browsers don't need to perform heavy Recalculate-Style-Phases. For more information read here.

Since it's using styled-components internally, it's best to use it in apps where you already have styled-components in place. The component is only compatible with styled-components v4.x.x.

The component is inspired by react-headroom.

Usage

A basic usage example:

render () {
  return <ReactStickyHeadroom scrollHeight={100} />
    <div style={{height: '100px', backgroundColor: 'red'}}>MyHeader</div>
  </ReactStickyHeadroom>
}

Demo

Go to https://integreat.github.io/react-sticky-headroom/ to view a demo:

Demo

API

You can pass the following props to ReactStickyHeadroom:

  • children: React.Node The header component, that should be hidden and revealed
  • scrollHeight: number The maximum amount of px the header should move up when scrolling
  • pinStart: number The minimum scrollTop position where the transform should start
  • height?: number (Optional) The height of the children node. Used for calculating the stickyTop position for a sticky ancestor in onStickyTopChanged
  • onStickyTopChanged?: (number) => void Fired, when Headroom changes its state and height is provided. Passes the calculated stickyTop position of an ancestor node.
  • positionStickyDisabled?: boolean (Optional, Default: false) If true, the header will stay static (e.g. for edge 16 support)

Edge 16 has had issues with css property position: sticky together with direction: rtl. This has been fixed in Edge 17. If you need Edge 16 as well as right-to-left support, you should use positionStickyDisabled: true, when detecting Edge 16.

Support

The component generally supports:

  • Internet Explorer 11
  • Edge >= 16
  • Chrome >= 41
  • Firefox >= 40
  • Safari >= 6.2

For hiding and revealing the header, the browser needs to support the css-property position: sticky. You can read about the browser support for that on caniuse.com. 'Partial-Support' is enough for ReactStickyHeadroom to work in most cases.

If there are any problems, please don't hesitate to open an issue on GitHub.