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

| property | default | type | description | | --------------- | :------------: | ------------- | ------------------------------------------------------ | | counter | 0 | number/string | show the counter inside the notifictaion circle | | innerCircle | false | boolean | hide counter and show a small inner circle | | backgroundColor | #DB0101 | string | set the background color | | fontColor | #FFF | string | set the font color | | fontFamily | Arial | string | set the font family | | fontWeight | bold | string | set the font weigth | | url | null | string/null | set the url to get the favicon | | position | bottom-right | string | set the position of the notification | | show | false | boolean | true: show the notificaion. off: hide the notification |

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