react-pre-hooksuseMutationObserver
Handles the MutationObserver and tracks changes being made to the DOM tree.
Parameters
- the MutationObserver callback function.
- the MutationObserver options, as well as the
refobject of the target element.
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| observer | RefObject | the MutationObserver object reference. |
Example Usage
tsx
import { useMutationObserver, useSet } from 'react-pre-hooks';
export default function Items() {
const items = useSet<number>();
const { ref } = useMutationObserver(
records => {
records.forEach(record => {
console.log(`the item ${record.addedNodes[0].textContent} is added.`);
});
},
{ childList: true }
);
const addItem = () => {
items.add(Math.floor(Math.random() * 100));
};
return (
<main>
<div ref={ref}>
{items.toArray((value, i) => (
<span key={i}>{value}</span>
))}
</div>
<button onClick={addItem}>Add element</button>
</main>
);
}import { useMutationObserver, useSet } from 'react-pre-hooks';
export default function Items() {
const items = useSet<number>();
const { ref } = useMutationObserver(
records => {
records.forEach(record => {
console.log(`the item ${record.addedNodes[0].textContent} is added.`);
});
},
{ childList: true }
);
const addItem = () => {
items.add(Math.floor(Math.random() * 100));
};
return (
<main>
<div ref={ref}>
{items.toArray((value, i) => (
<span key={i}>{value}</span>
))}
</div>
<button onClick={addItem}>Add element</button>
</main>
);
}