antd-watermark/es/useMutationObserver.js

watermark ui component for react

import { useEffect, useRef } from 'react';
export default function useMutationObserver() {
  var instance = useRef();

  var destroyObserver = function destroyObserver() {
    if (instance.current) {
      instance.current.takeRecords();
      instance.current.disconnect();
      instance.current = undefined;
    }
  };

  var createObserver = function createObserver(target, callback) {
    if (MutationObserver) {
      destroyObserver();
      instance.current = new MutationObserver(callback);
      instance.current.observe(target, {
        childList: true,
        subtree: true,
        attributeFilter: ['style', 'class']
      });
    }
  };

  useEffect(function () {
    return destroyObserver;
  }, []);

  var reRendering = function reRendering(mutation, watermarkElement) {
    var flag = false; // Whether to delete the watermark node

    if (mutation.removedNodes.length) {
      flag = Array.from(mutation.removedNodes).some(function (node) {
        return node === watermarkElement;
      });
    } // Whether the watermark dom property value has been modified


    if (mutation.type === 'attributes' && mutation.target === watermarkElement) {
      flag = true;
    }

    return flag;
  };

  return {
    createObserver: createObserver,
    destroyObserver: destroyObserver,
    reRendering: reRendering
  };
}