useResizeObserver ​
Hook that gives you resize observer state
sensors
low
test coverage
Last changed: 2 days ago
Installation ​
Library
CLI
Manual
typescript
import { useResizeObserver } from '@siberiacancode/reactuse';
Usage ​
typescript
const { entries, observer } = useResizeObserver(ref);
// or
const { ref, entry, observer } = useResizeObserver();
// or
const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));
// or
const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));
Demo ​
Api ​
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element to observe |
options.enabled? | boolean | true | The enabled state of the resize observer |
options.box? | ResizeObserverBoxOptions | - | The box model to observe |
options.onChange? | UseResizeObserverCallback | - | The callback to execute when resize is detected |
Returns
UseResizeObserverReturn
Parameters
Name | Type | Default | Note |
---|---|---|---|
options.enabled? | boolean | true | The enabled state of the resize observer |
options.box? | ResizeObserverBoxOptions | - | The box model to observe |
options.onChange? | UseResizeObserverCallback | - | The callback to execute when resize is detected |
Returns
UseResizeObserverReturn & { ref: StateRef<Target> }
Parameters
Name | Type | Default | Note |
---|---|---|---|
callback | UseResizeObserverCallback | - | The callback to execute when resize is detected |
Returns
UseResizeObserverReturn & { ref: StateRef<Target> }
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element to observe |
callback | UseResizeObserverCallback | - | The callback to execute when resize is detected |
Returns
UseResizeObserverReturn
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export type UseResizeObserverCallback = (
entry: ResizeObserverEntry,
observer: ResizeObserver
) => void;
export interface UseResizeObserverOptions extends ResizeObserverOptions {
/** The enabled state of the resize observer */
enabled?: boolean;
/** The callback to execute when resize is detected */
onChange?: UseResizeObserverCallback;
}
export interface UseResizeObserverReturn {
/** The resize observer entries */
entry: ResizeObserverEntry;
/** The resize observer instance */
observer?: ResizeObserver;
}
export interface UseResizeObserver {
<Target extends Element>(
options?: UseResizeObserverOptions,
target?: never
): UseResizeObserverReturn & { ref: StateRef<Target> };
(target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;
<Target extends Element>(
callback: UseResizeObserverCallback,
target?: never
): UseResizeObserverReturn & { ref: StateRef<Target> };
(target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;
}
Source ​
Source • DemoContributors ​
D