react-hideandseekmenu

A simple React hook to hide and show your site's menubar when scrolling.

Features

🪝React Hook

Installation

Install with NPM:

npm install react-hideandseekmenu --save

Usage

useHideAndSeekMenu

import { useHideAndSeekMenu } from 'react-hideandseekmenu'

You use this hook by passing in a ref. The hook will handle all the "hide and seek styling" for you by accessing ref.curent.style and setting inline-styles. You can pass in some options to change the CSS and behaviour of the menu hiding & showing.

useHideAndSeekMenu({
    ref: yourRef
})

import { useHideAndSeekMenu } from 'react-hideandseekmenu'
import { useRef } from 'react'

const Navigation = () => {
    const navref = useRef<HTMLElement>(null);
    useHideAndSeekMenu({
        ref: navref,
        offset: 120,
        transitionDuration: 0.3,
    })

    return (
        <Nav ref={navref} />
    )
}

The hook will then handle the "hide and seek styling" of your navigation bar.

Default stylings

position: sticky;
transition: top 0.3s ease;
top: 0;

Options

These options can be passed to the useHideAndSeekMenu hook: