react-favicon-notification v1.0.28

react-favicon-notification

React context to show notification on favicon

Demo

Installation

  npm i react-favicon-notification

Usage

Importing context provider

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import FaviconNotificationContextProvider from "react-favicon-notification";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <FaviconNotificationContextProvider>
      <App />
    </FaviconNotificationContextProvider>
  </React.StrictMode>
);

// Wrap your application in the providers

Use the custom hook to change the favicon notification config

import { useFaviconNotification } from "react-favicon-notification";

const [config, setConfig] = useFaviconNotification();

function showNotificationIcon() {
  setConfig({ ...config, show: true }); // set 'show' to true in order to see the notifications
}

function incrementNotification() {
  setConfig({ ...config, counter: config.counter + 1 });
}

config properties

Warning: Do not forget to set the show property to true in order to show the notification