robinjonsson/react-use-sticky

A react hook for observing/watching sticky state on refs

React Sticky Hook

A react hook for observing/watching position: sticky state on refs

Installation

npm i react-use-sticky

Usage

useSticky returns a pair of values, the ref to observe/watch and the current sticky state of the ref.

import { useSticky } from 'react-use-sticky';

function HeaderBar() {
  const [headerBarRef, sticky] = useSticky();
  const style = {
    position: 'sticky',
    top: 0,
    background: sticky ? 'green' : 'red',
  };

  return (
    <nav ref={headerBarRef} style={style}>
      HeaderBar
    </nav>
  );
}

export default HeaderBar;

Typescript with generic

import { useSticky } from 'react-use-sticky';

function HeaderBar() {
  const [headerBarRef, sticky] = useSticky<HTMLDivElement>();
  const style = {
    position: 'sticky',
    top: 0,
    background: sticky ? 'green' : 'red',
  } as const;

  return (
    <div ref={headerBarRef} style={style}>
      HeaderBar
    </div>
  );
}

export default HeaderBar;

Build

npm run build

react-use-sticky's Issues

Problems with Mobile Safari

Thanks for the hook, really useful.

I'm seeing issues on iOS where the reported value of stickyRef.current.getBoundingClientRect().top is often incorrect by quite some margin.

I see you're handling cases where it's negative due to rubber banding, but I've also observed incorrect positive values; I think it might have something to do with when the Mobile Safari browser UI grows / shrinks. Not sure if you've run into this / know of a fix?

There's a bug filed for the same problematic behaviour but with position fixed here https://openradar.appspot.com/radar?id=6668472289329152

I modified their jsbin slightly to dump out every value reported https://output.jsbin.com/divoyud