useVisibility ​
Hook that gives you visibility observer state
sensors
medium
test coverage
Last changed: 15 hours ago
Installation ​
Library
CLI
Manual
typescript
import { useVisibility } from '@siberiacancode/reactuse';
Usage ​
typescript
const { ref, entries, observer } = useVisibility();
// or
const { entries, observer } = useVisibility(ref);
// or
const { ref, entries, observer } = useVisibility(() => console.log('callback'));
// or
const { entries, observer } = useVisibility(ref, () => console.log('callback'));
Demo ​
Api ​
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element to detect intersection |
options.enabled? | boolean | true | The Intersection options |
options.onChange? | ((entries: IntersectionEntry[], observer: Intersection) => void) | undefined | - | The callback to execute when intersection is detected |
options.root? | HookTarget | document | The root element to observe |
Returns
UseVisibilityReturn
Parameters
Name | Type | Default | Note |
---|---|---|---|
options.enabled? | boolean | true | The Intersection options |
options.onChange? | ((entries: IntersectionEntry[], observer: Intersection) => void) | undefined | - | The callback to execute when intersection is detected |
options.root? | HookTarget | document | The root element to observe |
Returns
UseVisibilityReturn & { ref: StateRef<Target> }
Parameters
Name | Type | Default | Note |
---|---|---|---|
callback | UseVisibilityCallback | - | The callback to execute when intersection is detected |
Returns
UseVisibilityReturn & { ref: StateRef<Target> }
Parameters
Name | Type | Default | Note |
---|---|---|---|
callback | UseVisibilityCallback | - | The callback to execute when intersection is detected |
target | HookTarget | - | The target element to detect intersection |
Returns
UseVisibilityReturn
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export type UseVisibilityCallback = (
entry: IntersectionObserverEntry,
observer: IntersectionObserver
) => void;
export interface UseVisibilityOptions extends Omit<IntersectionObserverInit, 'root'> {
/** The enabled state of the intersection */
enabled?: boolean;
/** The callback to execute when intersection is detected */
onChange?: UseVisibilityCallback;
/** The root element to observe */
root?: HookTarget;
}
export interface UseVisibilityReturn {
/** The intersection observer entry */
entry?: IntersectionObserverEntry;
/** The intersection observer in view */
inView?: boolean;
/** The intersection observer instance */
observer?: IntersectionObserver;
}
export interface UseVisibility {
<Target extends Element>(
options?: UseVisibilityOptions,
target?: never
): UseVisibilityReturn & { ref: StateRef<Target> };
(target: HookTarget, options?: UseVisibilityOptions): UseVisibilityReturn;
<Target extends Element>(
callback: UseVisibilityCallback,
target?: never
): UseVisibilityReturn & { ref: StateRef<Target> };
(target: HookTarget, callback: UseVisibilityCallback): UseVisibilityReturn;
}
Source ​
Source • DemoContributors ​
D