[ Hook ] useNotification

🔴  Introduction

⚪  Window Notification에 대한 옵션을 설정하면 권한 허용 여부 이후 Notification을 띄워주는 Hook

 

🟠  Hook

 

export 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;
};

 

🟡  Usage

 

import { useNotification } from "./hooks/useNotification";

function App() {
    const triggerNotif = useNotification("Notification Title", {
        body: "Notification Body",
    });
    return (
        <div className="App">
            <button onClick={triggerNotif}>Hello</button>
        </div>
    );
}

export default App;