next-favicon-notification v1.0.4

next-favicon-notification

Note

Original package made by Mathss18, I just adapted to Next.js for my project.

Description

React context to show notification on favicon

Demo

Installation

  npm i next-favicon-notification

Usage

Importing context provider

"use client";
import {
  FaviconNotificationContextProvider,
  useFaviconNotification,
} from "next-favicon-notification";
import { useEffect } from "react";
import favicon from "../public/favicon.png";

export function Home() {
  const [config, setConfig]: any = useFaviconNotification();

  useEffect(() => {
    setConfig({
      radius: 120,
      counter: 1,
      innerCircle: true,
      backgroundColor: "#ff00ff",
      fontColor: "#FFF",
      fontFamily: "Arial",
      fontWeight: "bold",
      url: favicon.src,
      position: "bottom-right",
      show: false,
    });
  }, [setConfig]);

  return (
    <div>
      <button
        onClick={() =>
          setConfig((prevState: any) => {
            return { ...prevState, show: !prevState.show };
          })
        }
      >
        Toggle
      </button>
    </div>
  );
}

const Wrapper = () => {
  return (
    <FaviconNotificationContextProvider>
      <Home />
    </FaviconNotificationContextProvider>
  );
};

export default Wrapper;

Use the custom hook to change the favicon notification config

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

const [config, setConfig] = useFaviconNotification();

function showNotificationIcon() {
  setConfig({ ...config, show: true });
}

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