import { useEffect } from 'react';
import Mousetrap from 'mousetrap';
import 'mousetrap/plugins/pause/mousetrap-pause';

export default function useMousetrapPause(visible) {
  useEffect(() => {
    if (visible) {
      Mousetrap.pause();
    } else {
      Mousetrap.unpause();
    }

    return () => {
      Mousetrap.unpause();
    };
  }, [visible]);

  return null;
}
