Toast.tsx 775 B

12345678910111213141516171819202122232425262728293031323334
  1. import React, { useCallback, useEffect, useRef } from "react";
  2. import { TOAST_TIMEOUT } from "../constants";
  3. import "./Toast.scss";
  4. export const Toast = ({
  5. message,
  6. clearToast,
  7. }: {
  8. message: string;
  9. clearToast: () => void;
  10. }) => {
  11. const timerRef = useRef<number>(0);
  12. const scheduleTimeout = useCallback(
  13. () =>
  14. (timerRef.current = window.setTimeout(() => clearToast(), TOAST_TIMEOUT)),
  15. [clearToast],
  16. );
  17. useEffect(() => {
  18. scheduleTimeout();
  19. return () => clearTimeout(timerRef.current);
  20. }, [scheduleTimeout, message]);
  21. return (
  22. <div
  23. className="Toast"
  24. onMouseEnter={() => clearTimeout(timerRef?.current)}
  25. onMouseLeave={scheduleTimeout}
  26. >
  27. <p className="Toast__message">{message}</p>
  28. </div>
  29. );
  30. };