lib/useNotify.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { useState, useCallback } from "react";
import { motion as m, AnimatePresence } from "framer-motion";

export const useNotification = () => {
  const [showNotification, setShowNotification] = useState(false);
  const [notificationMessage, setNotificationMessage] = useState("");

  const show = useCallback(
    (message) => {
      setNotificationMessage(message);
      setShowNotification(true);
      setTimeout(() => {
        setShowNotification(false);
      }, 5000);
    },
    [setNotificationMessage, setShowNotification]
  );

  const NotificationComponent = () => {
    return (
      <AnimatePresence>
        {showNotification && (
          <m.div
            key="teasa"
            transition={{ duration: 0.5 }}
            initial={{ opacity: 0, y: 100 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 100 }}
            className="z-50 fixed bottom-10 w-screen flex justify-center text-center"
          >
            <div className="bg-green-600 text-white  px-2 py-2 font-bold rounded-[30px]">
              {notificationMessage}
            </div>
          </m.div>
        )}
      </AnimatePresence>
    );
  };

  return { Notification: NotificationComponent, show };
};