[React] React Hooks (10) - useNotification

useNotification

브라우저 알람 이벤트를 hooks로 만들어보자

 

useNotification 예시

Hello 버튼 클릭시 브라우저 알람뜸

이때 알람이 허용된 경우에만 알람 확인 가능

const useNotification = (title, options) => {
  if (!("Notification" in window)) {
    return;
  }
  const fireNotif = () => {
    if (Notification.permission !== "granted") {
      Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
          new Notification(title, options);
        } else {
          return;
        }
      });
    } else {
      new Notification(title, options);
    }
  };
  return fireNotif;
};

const App = () => {
  const triggerNotif = useNotification("notification", {
    body: "are you see?"
  });
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <button onClick={triggerNotif}>Hello</button>
    </div>
  );
};