@fluentui/react-northstar/dist/es/components/Portal/usePortalBox.js

A themable React component library.

import { useIsomorphicLayoutEffect } from '@fluentui/react-bindings';
import * as React from 'react';
import { isBrowser } from '../../utils/isBrowser';
export var usePortalBox = function usePortalBox(options) {
  var className = options.className,
    rtl = options.rtl,
    target = options.target;
  var element = React.useMemo(function () {
    var newElement = isBrowser() && target ? target.createElement('div') : null;

    // Element should be attached to DOM during render to make elements that will be rendered
    // inside accessible in effects of child components
    if (newElement) {
      target.body.appendChild(newElement);
    }
    return newElement;
  }, [target]);
  useIsomorphicLayoutEffect(function () {
    var classes = className.split(' ').filter(Boolean);
    if (element) {
      var _element$classList;
      (_element$classList = element.classList).add.apply(_element$classList, classes);
      if (rtl) {
        element.setAttribute('dir', 'rtl');
      } else {
        element.removeAttribute('dir');
      }
    }
    return function () {
      if (element) {
        var _element$classList2;
        (_element$classList2 = element.classList).remove.apply(_element$classList2, classes);
        element.removeAttribute('dir');
      }
    };
  }, [className, element, rtl]);

  // This effect should always last as it removes element from HTML tree
  React.useEffect(function () {
    return function () {
      if (element) {
        target.body.removeChild(element);
      }
    };
  }, [element, target]);
  return element;
};
//# sourceMappingURL=usePortalBox.js.map