@spaced-out/ui-design-system/lib/hooks/useToastPortal/useToastPortal.js.flow

Sense UI components library

// @flow strict
import {useEffect, useState} from 'react';

import {elevationToast} from '../../styles/variables/_elevation';
import {spaceMedium} from '../../styles/variables/_space';


type UseToastPortal = {
  toastRef: {current: HTMLDivElement | null},
};

export const useToastPortal = ({
  toastRef,
}: UseToastPortal): {loaded: boolean} => {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const div = document.createElement('div');

    // $FlowFixMe[incompatible-type];
    div.style = `position: fixed; bottom: ${spaceMedium}; left: ${spaceMedium}; z-index: ${elevationToast};`;
    /* $FlowIgnore */
    document.body.prepend(div);
    toastRef.current = div;
    setLoaded(true);
    /* $FlowIgnore */
    return () => document.body.removeChild(div);
  }, []);
  return {loaded};
};