DEV Community

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

Posted on

Navbar hide and show on Scroll using Custom React Hooks

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.

Discussion (6)

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
pratiksharm profile image
Pratik sharma Author

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
chetan_atrawalkar profile image
Chetan Atrawalkar👉CA. • Edited

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