rc-mutate-observer-modern/es/MutateObserver.js

React MutateObserver Component

import React from 'react';
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
import { supportRef, useComposeRef } from "rc-util/es/ref";
import findDOMNode from "rc-util/es/Dom/findDOMNode";
import useEvent from "rc-util/es/hooks/useEvent";
import DomWrapper from "./wrapper";
import useMutateObserver from "./useMutateObserver";
const MutateObserver = props => {
  const {
    children,
    options,
    onMutate = () => {}
  } = props;
  const callback = useEvent(onMutate);
  const wrapperRef = React.useRef(null);
  const elementRef = React.useRef(null);
  const canRef = /*#__PURE__*/React.isValidElement(children) && supportRef(children);
  const mergedRef = useComposeRef(elementRef, canRef ? children.ref : null);
  const [target, setTarget] = React.useState(null);
  useMutateObserver(target, callback, options);

  // =========================== Effect ===========================
  // Bind target
  useLayoutEffect(() => {
    setTarget(findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current));
  });

  // =========================== Render ===========================
  if (!children) {
    if (process.env.NODE_ENV !== 'production') {
      console.error('MutationObserver need children props');
    }
    return null;
  }
  return /*#__PURE__*/React.createElement(DomWrapper, {
    ref: wrapperRef
  }, canRef ? /*#__PURE__*/React.cloneElement(children, {
    ref: mergedRef
  }) : children);
};
export default MutateObserver;