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
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
{ 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 • DemoContributors ​
D