useMutationObserver ​
Hook that gives you mutation observer state
browser
test coverage
Last changed: yesterday
Installation ​
Library
CLI
Manual
typescript
import { useMutationObserver } from '@siberiacancode/reactuse';
Usage ​
typescript
const { ref, observer, stop } = useMutationObserver(() => console.log('callback'))
// or
const { observer, stop } = useMutationObserver(ref, () => console.log('callback'))
Demo ​
Api ​
Parameters
Name | Type | Default | Note |
---|---|---|---|
callback | MutationCallback | - | The callback to execute when mutation is detected |
options.enabled? | boolean | true | The enabled state of the mutation observer |
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 |
options.characterDataOldValue? | boolean | - | Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded |
options.attributeOldValue? | boolean | - | Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted |
options.attributeFilter? | string[] | - | Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted |
Returns
UseMutationObserverReturn & { ref: StateRef<Target> }
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element to observe |
callback | MutationCallback | - | The callback to execute when mutation is detected |
options.enabled? | boolean | true | The enabled state of the mutation observer |
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 |
options.characterDataOldValue? | boolean | - | Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded |
options.attributeOldValue? | boolean | - | Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted |
options.attributeFilter? | string[] | - | Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted |
Returns
UseMutationObserverReturn
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export type UseMutationObserverTarget = HookTarget;
export interface UseMutationObserverReturn {
/** The mutation observer instance */
observer: MutationObserver;
/** The mutation observer entries */
stop: () => void;
}
export interface UseMutationObserverOptions extends MutationObserverInit {
/** The enabled state of the mutation observer */
enabled?: boolean;
}
export interface UseMutationObserver {
(
target: HookTarget,
callback: MutationCallback,
options?: UseMutationObserverOptions
): UseMutationObserverReturn;
<Target extends Element>(
callback: MutationCallback,
options?: UseMutationObserverOptions,
target?: never
): UseMutationObserverReturn & { ref: StateRef<Target> };
}
Source ​
Source • DemoContributors ​
D