Skip to content

stevenla/react-stickyish

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

react-stickyish

npm version npm bundle size

React Hook that allows for headers to be stickyish, so they disappear when scrolling down but reappear when scrolling up.

Check out the demo!

Install

npm install --save react-stickyish

Usage

The hook takes in one param for the ref of the element that should be made stickyish. The hook returns an object with the { top, position } CSS properties for the navbar that should be stickyish. You can extract these items out, or pass them into your HTML element directly.

import React, { useRef } from "react";
import { useStickyish } from "react-stickyish";

function Navbar() {
  const ref = useRef();
  const stickyish = useStickyish(ref);
  return (
    <nav ref={ref} style={stickyish}>
      ...
    </nav>
  );
}

About

React hook for a sticky header that re-appears on scroll up

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published