Flex gap polyfill

flexgap.tsx

import { useState, useLayoutEffect, useEffect } from 'react';

// remove this once safari support ships
function checkFlexGap() {
  // create flex container with row-gap set
  const flex = document.createElement('div');
  flex.style.display = 'flex';
  flex.style.flexDirection = 'column';
  flex.style.rowGap = '1px';

  // create two, elements inside it
  flex.appendChild(document.createElement('div'));
  flex.appendChild(document.createElement('div'));

  // append to the DOM (needed to obtain scrollHeight)
  document.body.appendChild(flex);
  var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
  flex?.parentNode?.removeChild(flex);

  return isSupported;
}

export function useFlexGap() {
  const [isFlexGapSupported, setIsFlexGapSupported] = useState<boolean>(false);

  useEffect(() => {
    if (document.documentElement.classList.contains('flexbox-gap')) {
      setIsFlexGapSupported(true);
    } else if (document.documentElement.classList.contains('no-flexbox-gap')) {
      setIsFlexGapSupported(false);
    }
  }, []);

  return isFlexGapSupported;
}

export function useFlexGapPolyfill() {
  useLayoutEffect(() => {
    // first check if it's already been run
    if (
      !document.documentElement.classList.contains('flexbox-gap') &&
      !document.documentElement.classList.contains('no-flexbox-gap')
    ) {
      if (checkFlexGap()) {
        document.documentElement.classList.add('flexbox-gap');
      } else {
        document.documentElement.classList.add('no-flexbox-gap');
      }
    }
  }, []);
}