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:

| Option | Type | Default | Description | |---|---|---|---| | offset | number | 90 | The offset at which the menu should disappear | | debounceTime | number | 10 | The debounce time for the hook to be fired | | ref | RefObject | undefined | Pass a ref to the hook to let the hook handle all the "hide and seek styling" | | transitionDuration | number | 0.3 | Set a transition duration for the CSS transition property | | transitionTimingFunction | string | ease | Set a transition timing function for the CSS transition property |