department-of-veterans-affairs/vets-website

View on GitHub
src/applications/_mock-form-ae-design-patterns/shared/components/Portal.jsx

Summary

Maintainability
A
0 mins
Test Coverage
import React, { useState } from 'react';
import { createPortal } from 'react-dom';

export const Portal = ({
  children,
  element = 'div',
  prepend = true,
  target = document.body,
}) => {
  const [container] = useState(() => {
    return document.createElement(element);
  });

  React.useEffect(
    () => {
      if (prepend) {
        target.prepend(container);
      } else {
        target.appendChild(container);
      }
      return () => {
        if (target) {
          target.removeChild(container);
        }
      };
    },
    [container, prepend, target],
  );

  return createPortal(children, container);
};