Skip to content

useSticky ​

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

browser
test coverage
Last changed: last month

Installation ​

Library
CLI
Manual
typescript
import { useSticky } from '@siberiacancode/reactuse';

Usage ​

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

Demo ​

Api ​

Parameters

NameTypeDefaultNote
targetHookTarget-The target sticky element
options.axis?UseStickyAxis'vertical'The axis of motion of the sticky component
options.root?UseStickyRootdocumentThe element that contains your sticky component

Returns

UseStickyReturn

Parameters

NameTypeDefaultNote
options.axis?UseStickyAxis'vertical'The axis of motion of the sticky component
options.root?UseStickyRootdocumentThe element that contains your sticky component

Returns

{ stickyRef: StateRef<Target> } & UseStickyReturn

Type declaration ​

typescript
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): boolean;

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

Source ​

Source • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.