What is the best way to run a method after a popover is closed?

[angrotheman]

When a user closes a popover, I need to run a method to clean up a few things. Closing manually is not an option because I need to run the method also when pressing escape or clicking outside the popover, etc.

What I'm missing here is an onClose prop where I could easily define my method.

Current Workaround:

const OpenChecker = ({ setIsOpen }) => {
  useEffect(() => {
    setIsOpen(true);
    return () => setIsOpen(false);
  }, [setIsOpen]);

  return <></>;
};

const RealPopover = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    if (!isOpen) {
      cleanUp();
    }
  }, [isOpen]);

  return (
    <Popover as={'div'}>
      {({ open }) => (
        <>
          {open && <OpenChecker setIsOpen={setIsOpen} />}
        </>
      )}
    </Popover>
  );
}

Is there a better solution to this problem, or did I miss something while reading the documentation?

Thanks for any input!

[mcgrealife]

@angrotheman One way would be to use a Transition component inside the Popover.

The Transition component has an AfterLeave callback prop, where you can define your method.

[sghong3130]

this method makes guilty because I think Transition is for animation. It is just side-effect. anyway it works well thank you. Popover supports onClose will be better solution.