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 React from "react";
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;