How to use the @rooks/use-mutation-observer function in @rooks/use-mutation-observer

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.

github elrumordelaluz / reactour / src / Tour.js View on Github external
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 {
github elrumordelaluz / reactour / src / TourHooks.js View on Github external
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 {
github imbhargav5 / rooks / packages / storybook / src / mutation-observer.js View on Github external
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

MIT
Latest version published 4 years ago

Package Health Score

67 / 100
Full package analysis

Popular @rooks/use-mutation-observer functions