useRootLayerDomNode RootLayer

useRootLayerDomNode.js

// @flow

import { useLayoutEffect } from 'react';

const mountCountMap = new Map<string, number>();

const updateRootClassNameUsageCount = (className, calculateNewCount: (count: number) => number) => {
  const oldCount = mountCountMap.get(className) || 0;
  const count = calculateNewCount(oldCount);
  mountCountMap.set(className, count);

  if (!document.documentElement) return;
  if (count === 0) document.documentElement.classList.remove(className);
  else if (count > 0) document.documentElement.classList.add(className);
};

export function useRootClassList(className: string, disabled?: boolean = false) {
  useLayoutEffect(() => {
    if (disabled) {
      return;
    }
    updateRootClassNameUsageCount(className, count => count + 1);
    return () => updateRootClassNameUsageCount(className, count => count - 1);
  }, [className, disabled]);
}

export function UseRootClassListView({ className, disabled }: { className: string, disabled: boolean }) {
  useRootClassList(className, disabled);
  return null;
}