DEV Community

Cover image for Navbar hide and show on Scroll using Custom React Hooks
Pratik sharma
Pratik sharma

Posted on • Edited on • Originally published at blog.coolhead.in

Navbar hide and show on Scroll using Custom React Hooks

#react #navbar #webdev #css

Making a Custom React Hook

code:

/**
 * useScroll React custom hook
 * Usage:
 *    const { scrollX, scrollY, scrollDirection } = useScroll();
 */

 import { useState, useEffect } from "react";

 export function useScroll() {
    // storing this to get the scroll direction
   const [lastScrollTop, setLastScrollTop] = useState(0);
    // the offset of the document.body
   const [bodyOffset, setBodyOffset] = useState(
     document.body.getBoundingClientRect()
   );
    // the vertical direction
   const [scrollY, setScrollY] = useState(bodyOffset.top);
    // the horizontal direction
   const [scrollX, setScrollX] = useState(bodyOffset.left);
    // scroll direction would be either up or down
   const [scrollDirection, setScrollDirection] = useState();

   const listener = e => {
     setBodyOffset(document.body.getBoundingClientRect());
     setScrollY(-bodyOffset.top);
     setScrollX(bodyOffset.left);
     setScrollDirection(lastScrollTop > -bodyOffset.top ? "down" : "up");
     setLastScrollTop(-bodyOffset.top);
   };

   useEffect(() => {
     window.addEventListener("scroll", listener);
     return () => {
       window.removeEventListener("scroll", listener);
     };
   });

   return {
     scrollY,
     scrollX,
     scrollDirection
   };
 }
Enter fullscreen mode Exit fullscreen mode

Styles

I am using css-in-javascript to set the visibility of the nav bar but you can use whatever you like.

const styles = {
    active: {
      visibility: "visible",
      transition: "all 0.5s"
    },
    hidden: {
      visibility: "hidden",
      transition: "all 0.5s",
      transform: "translateY(-100%)"
    }
  }
Enter fullscreen mode Exit fullscreen mode

Finale code would look like this 

import React from 'react';

import {useScroll} from './../../hooks/useScroll'

export default function Navbar() {
  const { y, x, scrollDirection } = useScroll();  

  const styles = {
    active: {
      visibility: "visible",
      transition: "all 0.5s"
    },
    hidden: {
      visibility: "hidden",
      transition: "all 0.5s",
      transform: "translateY(-100%)"
    }
  }

    return (
        <nav className="Header" style={scrollDirection === "down" ? styles.active: styles.hidden}   >
        <Link to="/" className="Header__link">
            <img src={Logo} height="50px" width="auto" alt="logo"/>
            <div className="Header__link__title">
              Chronology
            </div>
        </Link>  
        <ul className="flex">
            <li>
              <Link to="/about" className="Header__link">About</Link>
            </li>
            <li>
              <Link to="/blog" className="Header__link">Blogs</Link>
            </li>
          </ul>
        </nav>       
    )
}
Enter fullscreen mode Exit fullscreen mode

I know this is very lazy writing but it's already midnight.

I will write in detail about it.

I hope it help someone.

Top comments (11)

Collapse
 
link2twenty profile image
Andrew Bone •

Hi, there are a couple of things here that could lead to some Jank so I thought I'd give you some pointers, I hope that's alright 😊.

You're listener function is outside of the useEffect it's used in. This means it is remade on every draw, this isn't a huge problem with onclick events and stuff but when it comes to using them in a useEffect it means the the useEffect runs every draw (as does its return functions).

In this instance you've not got a dependencies array on your useEffect anyway meaning it is ran every draw. It would be better to have an empty array as the dependencies as that means it will only run on mount and then return on unmount.

You're calling getBoundingClientRect on each scroll that's quite a heavy function to be calling so often. It's worth remembering that window already knows how far it's scrolled so we can just get it off that.

A couple of extra points I'd add in are the scroll event listener is heavy as it is so I'd include a context with your hook that a dev can use to use the same listener else where in the app and on the same note you could make the function more generic by giving not just the current x and y but also the last x and y then you don't need to include the direction as it's a simple calculation the dev can include else where.

I think with just those couple of changes you could change the hook from a great concept with a good execution to a great concept with a great execution. I've made a quick demo with my changes for you to have a look at 😊

Collapse
 
dvinubius profile image
Dinu B •

@link2twenty Great analysis and improvements!

If I may add two cents - the approach with


nav.nav-bar--hidden {
transform: translateY(-100%);
}

creates some flickering if the navbar has a transparent background and a blurring of the backdrop. This is quite common for navbars IMO, so it's worth pointing out the alternative here, which doesn't interfere with the blurring:


nav {
/* ... */
transition: top 150ms ease-in-out;
}
nav.nav-bar--hidden {
top: -100%;
}

Collapse
 
biomathcode profile image
Pratik sharma •

I agree with all the things that you have told me. The dependency things is a mistake on my side. But Other things that you added a context and that getBoundingClientRect function is a heavy function, I was not aware of those.

I get it that we can calculate the direction when we need and don't really have to do that in custom hook itself.

Thanks for taking your time

Highly Appreciate it !!

I think you do great code reviews, Andrew !

I will be changing the article accordingly.

Collapse
 
hasnaindev profile image
Muhammad Hasnain •

Ooh yes! Adding event listeners like that is a really really good example of a memory leak. I once read an article where soundcloud developers said that their app was getting slower after a lot of use. It was because they had the same issue. Attaching events without removing them.

Also, the Sandbox you shared, there is an empty folder called useScrollListener. The import names are a little confusing too. I also want to know why you didn't use a useRef hook instead of using the className attribute?

Collapse
 
link2twenty profile image
Andrew Bone •

I've fixed the names, I changed the name part way through making the demo so I guess it got confused and kept made a new version rather than renaming.

Controlling the classes like this means you know for sure what classes you element has if you start adding and removing them with JS you have to keep track of all the classes and make sure you don't remove any by accident, or even leave any on the element when you don't mean to.

Collapse
 
pedrotomas50 profile image
pedrotomas50 • • Edited

For those who are using styled components.

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
reymondar profile image
Ramon Arana • • Edited

Great article. I'll leave the easiest solution imo:

I've use @link2twenty 's hook (first comment) with the following implementation in the menu component:

    const [direction , setDirection] = useState('')
    const scroll = useScrollListener()

    useEffect(() => scroll.y > 150 && scroll.y - scroll.lastY > 0 ? setDirection('down') : setDirection('up'),
    [scroll.y, scroll.lastY]);

    const navbar: any = {
        active: {
            visibility: "visible",
            transition: "all 0.5s"
        },
        hidden: {
            visibility: "hidden",
            transition: "all 0.5s",
            transform: "translateY(-100%)"
        }
    }
Enter fullscreen mode Exit fullscreen mode 
 <nav style={direction === 'up' ? navbar.active : navbar.hidden}>{children}</nav>
Enter fullscreen mode Exit fullscreen mode

Works perfectly, but you'll propable get type error at style prop, but you can fix it by giving "any" type to the navbar variable or just replacing style with two classes ( or being proficient at TS).

:)

Also, always check first if you are going up, because otherwise when the page renders the menu won't be visible (because the default value will be navbar.hidden). Hope this helps!

Collapse
 
micahkatz profile image
Micah Katz •

This has some Server-Side-Rendering errors with document. I have updated it to handle those and TypeScript as well :)

import { useSsr } from 'usehooks-ts'

    function useScroll() {
        const { isBrowser } = useSsr()

        // storing this to get the scroll direction
        const [lastScrollTop, setLastScrollTop] = useState(0);
        // the offset of the document.body
        const [bodyOffset, setBodyOffset] = useState(
            isBrowser ? document.body.getBoundingClientRect() : { top: 0, left: 0 }
        );
        // the vertical direction
        const [scrollY, setScrollY] = useState<number>(bodyOffset.top);
        // the horizontal direction
        const [scrollX, setScrollX] = useState<number>(bodyOffset.left);
        // scroll direction would be either up or down
        const [scrollDirection, setScrollDirection] = useState<'down' | 'up'>();

        const listener = (e: Event) => {
            isBrowser && setBodyOffset(document.body.getBoundingClientRect());
            setScrollY(-bodyOffset.top);
            setScrollX(bodyOffset.left);
            setScrollDirection(lastScrollTop > -bodyOffset.top ? "down" : "up");
            setLastScrollTop(-bodyOffset.top);
        };

        useEffect(() => {
            window.addEventListener("scroll", listener);
            return () => {
                window.removeEventListener("scroll", listener);
            };
        });

        return {
            scrollY,
            scrollX,
            scrollDirection
        };
    }
Enter fullscreen mode Exit fullscreen mode

Then you can do something like this

    React.useEffect(() => {
        setIsVisible(scrollDirection === 'down')
    }, [scrollDirection])
Enter fullscreen mode Exit fullscreen mode

I have it working on my website at micahkatz.com

Collapse
 
biomathcode profile image
Pratik sharma •

Thank you so much for this.

Collapse
 
chetan_atrawalkar profile image
Chetan Atrawalkar • • Edited

Thank You so much bro ❤️ Nice post so helpful 🤗

Collapse
 
scriptkavi profile image
ScriptKavi •

Why create one when you can get all awesome hooks in a single library?

Try scriptkavi/hooks. Copy paste style and easy to integrate with its own CLI

View full discussion (11 comments)

Read next

danrot90 profile image

Writing high quality tests

Daniel Rotter -

cryptosandy profile image

From Web2 to Web3: A Developer’s Guide to the Shift

Crypto.Andy (DEV) -

blamsa0mine profile image

How to Create a Dynamic Popover with CSS and JavaScript 🚀

A0mineTV -

bitbyprogress profile image

Diving Back into React: A Software Engineer’s Learning Journey

Progress Eze -