# useMutationObserver

*Category:* Utilities
*Section:* DOM behavior hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMutationObserver
*Captured:* 2026-04-27T14:59:37.240Z

The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

## useMutationObserver

### Example: Example 1

Demo callout
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

Set Default Style Set Primary Style Set Secondary Style Set Warning Style Set Danger Style
Element Changes: -

#### React (tsx)

```tsx
import { useRef, useCallback, useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import useMutationObserver from '@rio-cloud/rio-uikit/useMutationObserver';

export default () => {
    const [changes, setChanges] = useState('-');
    const [calloutStyle, setCalloutStyle] = useState('default');

    const ref = useRef<HTMLElement>(null);

    const handleTargetMutation = useCallback((mutationList: MutationRecord[]) => {
        mutationList.forEach((mutation: MutationRecord) => {
            console.log(mutation);
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                setChanges(`className: ${(mutation.target as HTMLElement).className}`);
            }
        });
    }, []);

    useMutationObserver(ref, handleTargetMutation);

    return (
        <div className='display-grid'>
            <div className='margin-y-15'>
                <div ref={ref} className={`callout callout-${calloutStyle}`}>
                    <div className=' text-medium text-size-20 line-height-125rel margin-bottom-10'>Demo callout</div>
                    <p>
                        At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.
                    </p>
                </div>
            </div>
            <div className='margin-top-20'>
                <div className='btn-toolbar'>
                    <Button onClick={() => setCalloutStyle('default')}>Set Default Style</Button>
                    <Button onClick={() => setCalloutStyle('primary')}>Set Primary Style</Button>
                    <Button onClick={() => setCalloutStyle('secondary')}>Set Secondary Style</Button>
                    <Button onClick={() => setCalloutStyle('warning')}>Set Warning Style</Button>
                    <Button onClick={() => setCalloutStyle('danger')}>Set Danger Style</Button>
                </div>
                <div className='margin-top-15'>
                    <label>Element Changes:</label>
                    <div>{changes}</div>
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-grid">
    <div class="margin-y-15">
        <div class="callout callout-default" data-capture-callout="true">
            <div class=" text-medium text-size-20 line-height-125rel margin-bottom-10">Demo callout</div>
            <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
        </div>
    </div>
    <div class="margin-top-20">
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Default Style</button>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Primary Style</button>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Secondary Style</button>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Warning Style</button>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Danger Style</button>
        </div>
        <div class="margin-top-15">
            <label>Element Changes:</label>
            <div>-</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| targetElement | HTMLElement \| React.MutableRefObject<object> \| null \| undefined | — | The ref or target element to observe changes for. |
| callback | MutationCallback | — | The callback to execute when mutations are observed. |
| options | { attributes?: boolean; childList?: boolean; subtree?: boolean; } | — | Options passed to the mutation observer. |