use-headroom

Create headers that are hidden after user scrolls past given distance

Source

Docs

PackageIcon

Usage

The use-headroom hook creates headers that are hidden after the user scrolls past a given distance in pixels. The hook returns a boolean value that determines whether the element should be pinned or hidden. It returns true when the current scroll position is less than the specified fixedAt value and after the user has scrolled up.

Header is pinned

import { Box, Portal, Text } from '@mantine/core';
import { useHeadroom } from '@mantine/hooks';

function Demo() {
  const pinned = useHeadroom({ fixedAt: 120 });

  return (
    <>
      <Portal>
        <Box
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            padding: 'var(--mantine-spacing-xs)',
            height: 60,
            zIndex: 1000000,
            transform: `translate3d(0, ${pinned ? 0 : '-110px'}, 0)`,
            transition: 'transform 400ms ease',
            backgroundColor: 'var(--mantine-color-body)',
          }}
        >
          Pinned header
        </Box>
      </Portal>
      <Text ta="center">Header is {pinned ? 'pinned' : 'not pinned'}</Text>
    </>
  );
}

Definition

interface UseHeadroomOptions {
  /** Number in px at which element should be fixed */
  fixedAt?: number;

  /** Called when element is pinned */
  onPin?: () => void;

  /** Called when element is at fixed position */
  onFix?: () => void;

  /** Called when element is unpinned */
  onRelease?: () => void;
}

function useHeadroom(input?: UseHeadroomOptions): boolean;

Exported types

The UseHeadroomOptions type is exported from @mantine/hooks;

import { UseHeadroomOptions } from '@mantine/hooks';

use-hash

use-idle