How to use @rooks/use-mutation-observer - 3 common examples
To help you get started, we’ve selected a few @rooks/use-mutation-observer examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
elrumordelaluz / reactour / src / Tour.js View on Github 
showButtons,
showNavigation,
prevButton,
showNavigationNumber,
disableDotsNavigation,
lastStepNextButton,
nextButton,
rounded,
maskSpace,
}) {
const [current, setCurrent] = useState(0)
const [state, dispatch] = useReducer(reducer, initialState)
const helper = useRef(null)
const observer = useRef(null)
useMutationObserver(observer, (mutationList, observer) => {
if (isOpen) {
showStep()
mutationList.forEach(mutation => {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
setTimeout(
() => makeCalculations(getNodeRect(mutation.addedNodes[0])),
500
)
} else if (
mutation.type === 'childList' &&
mutation.removedNodes.length > 0
) {
// console.log('Removed node, do something')
}
})
} else {highlightedMaskClassName,
maskClassName,
showButtons,
showNavigation,
prevButton,
showNavigationNumber,
disableDotsNavigation,
lastStepNextButton,
nextButton,
}) {
const [current, setCurrent] = useState(0)
const [state, dispatch] = useReducer(reducer, initialState)
const helper = useRef(null)
const observer = useRef(null)
useMutationObserver(observer, (mutationList, observer) => {
if (isOpen) {
showStep()
mutationList.forEach(mutation => {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
setTimeout(
() => makeCalculations(getNodeRect(mutation.addedNodes[0])),
500
)
} else if (
mutation.type === 'childList' &&
mutation.removedNodes.length > 0
) {
// console.log('Removed node, do something')
}
})
} else {function MutationObserverDemo() {
const myRef = useRef();
const [mutationCount, setMutationCount] = useState(0);
const incrementMutationCount = () => {
return setMutationCount(mutationCount + 1);
};
useMutationObserver(myRef, incrementMutationCount);
const [XOffset, setXOffset] = useState(0);
const [YOffset, setYOffset] = useState(100);
return (
<>
<div style="{{">
</div>@rooks/use-mutation-observer
A React Hooks package for mutation-observer
