useMutationObserver

Category

Elements

Export Size

547 B

Last Changed

5 days ago

Watch for changes being made to the DOM tree

Demo

Usage

import { useMutationObserver } from '@reause/core'
import { useRef, useState } from 'react'

const el = useRef<HTMLDivElement | null>(null)
const [messages, setMessages] = useState<string[]>([])

useMutationObserver(el, (mutations) => {
  if (mutations[0])
    setMessages(prev => [...prev, mutations[0].attributeName!])
}, {
  attributes: true,
})

Type Declarations

export interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {
}

export interface UseMutationObserverReturn {
    isSupported: boolean;
    stop: () => void;
    takeRecords: () => MutationRecord[] | undefined;
}

export type ElementTargetOrArray<T extends TargetElement = TargetElement> = ElementTarget<T> | ElementTarget<T>[]

export function useMutationObserver(target: ElementTargetOrArray, callback: MutationCallback, options?: UseMutationObserverOptions): UseMutationObserverReturn

export function useResizeObserver(target: ElementTargetOrArray, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): UseResizeObserverReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

00719 - fix(core): resolve useMutationObserver audit findings (#607)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)