useMutationObserver

browser

test coverage

Last changed: 17 days ago

Hook that gives you mutation observer state

import { useMutationObserver } from '@siberiacancode/reactuse';

Usage

const { ref, observer, stop } = useMutationObserver(() => console.log('callback'))
// or
const { observer, stop } = useMutationObserver(ref, () => console.log('callback'))

Demo

source

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

Source

Source • Demo

Contributors

debabin