useSticky

Hook that allows you to detect that your sticky component is stuck

elements

low

test coverage

Last changed: 9 days ago

Installation

Library

CLI

Manual

import { useSticky } from '@siberiacancode/reactuse';

Usage

const { stuck } = useSticky(ref);
// or
const { stuck, ref } = useSticky();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target sticky element
options.axis?	UseStickyAxis	'vertical'	The axis of motion of the sticky component
options.root?	UseStickyRoot	document	The element that contains your sticky component

Returns

UseStickyReturn

Parameters

Name	Type	Default	Note
options.axis?	UseStickyAxis	'vertical'	The axis of motion of the sticky component
options.root?	UseStickyRoot	document	The element that contains your sticky component

Returns

{ ref: StateRef<Target> } & UseStickyReturn

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseStickyReturn {
  stuck: boolean;
}

export type UseStickyAxis = 'horizontal' | 'vertical';

export interface UseStickyOptions {
  axis?: UseStickyAxis;
  root?: HookTarget;
}

export interface UseSticky {
  (target: HookTarget, options?: UseStickyOptions): UseStickyReturn;

  <Target extends Element>(
    options?: UseStickyOptions,
    target?: never
  ): UseStickyReturn & {
    ref: StateRef<Target>;
  };
}

Source

Source • Demo

Contributors

D

debabin