useMutationObserver ​
Hook that gives you mutation observer state
sensors
low
test coverage
Last changed: 2 days ago
Installation ​
Library
CLI
Manual
typescript
import { useMutationObserver } from '@siberiacancode/reactuse';
Usage ​
typescript
const { observer, stop } = useMutationObserver(ref, { childList: true });
// or
const { ref, observer, stop } = useMutationObserver({ childList: true });
// or
const { ref, observer, stop } = useMutationObserver((mutations) => console.log(mutations));
// or
const { observer, stop } = useMutationObserver((mutations) => console.log(mutations), ref);
Demo ​
Api ​
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element to observe |
options.enabled? | boolean | true | The enabled state of the mutation observer |
options.onChange? | UseMutationObserverCallback | - | The callback to execute when mutation is detected |
options.attributes? | boolean | - | Set to true if mutations to target's attributes are to be observed |
options.characterData? | boolean | - | Set to true if mutations to target's data are to be observed |
options.childList? | boolean | - | Set to true if mutations to target's children are to be observed |
options.subtree? | boolean | - | Set to true if mutations to not just target, but also target's descendants are to be observed |
Returns
UseMutationObserverReturn
Parameters
Name | Type | Default | Note |
---|---|---|---|
options.enabled? | boolean | true | The enabled state of the mutation observer |
options.onChange? | UseMutationObserverCallback | - | The callback to execute when mutation is detected |
options.attributes? | boolean | - | Set to true if mutations to target's attributes are to be observed |
options.characterData? | boolean | - | Set to true if mutations to target's data are to be observed |
options.childList? | boolean | - | Set to true if mutations to target's children are to be observed |
options.subtree? | boolean | - | Set to true if mutations to not just target, but also target's descendants are to be observed |
Returns
UseMutationObserverReturn & { ref: StateRef<Target> }
Parameters
Name | Type | Default | Note |
---|---|---|---|
callback | UseMutationObserverCallback | - | The callback to execute when mutation is detected |
Returns
UseMutationObserverReturn & { ref: StateRef<Target> }
Parameters
Name | Type | Default | Note |
---|---|---|---|
callback | UseMutationObserverCallback | - | The callback to execute when mutation is detected |
target | HookTarget | - | The target element to observe |
Returns
UseMutationObserverReturn
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export type UseMutationObserverCallback = (
mutations: MutationRecord[],
observer: MutationObserver
) => void;
export interface UseMutationObserverOptions extends MutationObserverInit {
/** The enabled state of the mutation observer */
enabled?: boolean;
/** The callback to execute when mutation is detected */
onChange?: UseMutationObserverCallback;
}
export interface UseMutationObserverReturn {
/** The mutation observer instance */
observer?: MutationObserver;
}
export interface UseMutationObserver {
<Target extends Element>(
options?: UseMutationObserverOptions,
target?: never
): UseMutationObserverReturn & { ref: StateRef<Target> };
(target: HookTarget, options?: UseMutationObserverOptions): UseMutationObserverReturn;
<Target extends Element>(
callback: UseMutationObserverCallback,
target?: never
): UseMutationObserverReturn & { ref: StateRef<Target> };
(target: HookTarget, callback: UseMutationObserverCallback): UseMutationObserverReturn;
}
Source ​
Source • DemoContributors ​
D