Skip to content

jsdeveloperr/favicon-badge-notify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

46 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🟠 Favicon Badge Notify

Custom function adds a favicon and a badge

npm npm bundle size npm GitHub license

πŸ“š Introduction

Favicon Badge Notify implemented as custom function.

πŸš€ Examples

Check our Reactjs πŸ‘‰ example

Check our Vuejs πŸ‘‰ example

Check our Solidjs πŸ‘‰ example

πŸ“¦ Installation

# install with yarn
yarn add favicon-badge-notify
# install with npm
npm install favicon-badge-notify
# install with pnpm 
pnpm add favicon-badge-notify

✨ Reactjs example

import { useState, useEffect } from 'react'
import { Helmet } from "react-helmet"

import useFaviconBadgeNotify from 'favicon-badge-notify'
import faviconSvg from "./assets/favicon.svg";

function ReactFaviconBadgeNotify() {
  const [count, setCount] = useState(0)
  const [favicon, setFavicon] = useState(faviconSvg)
  const { drawBadge, destroyBadge } = useFaviconBadgeNotify({
    src: faviconSvg,
    badgeValue: count,
  })

  useEffect(() => {
    drawBadge().then(badge => setFavicon(badge));

    return () => destroyBadge();
  }, [count]);

  return (
    <div className="App">
      <Helmet>
        <link rel="icon" type="image/png" sizes="128x128" href={favicon}></link>
      </Helmet>
      <header className="App-header">
        <p className="buttons">
          <button type="button" className="increase" onClick={() => setCount((count) => count + 1)}>
            increase
          </button>
          <span>{count}</span>
          <button type="button" className="decrease" onClick={() => count - 1 >= 0 && setCount((count) => count - 1)}>
            decrease
          </button>
        </p>
      </header>
    </div>
  )
}

export default ReactFaviconBadgeNotify

✨ Vuejs example

<script setup lang="ts">
import { reactive, onBeforeUnmount, watch } from 'vue';
import { Head } from '@vueuse/head';
import useFaviconBadgeNotify from 'favicon-badge-notify';

const state = reactive({
  favicon: '/favicon.svg',
  count: 0
});

const setFavicon = (val: string) => state.favicon = val;
const setCount = (val: number) => state.count = val;

const { drawBadge, destroyBadge } = useFaviconBadgeNotify({
  src: state.favicon
});

watch(
  () => state.count,
  (count, prevCount) => {
    drawBadge(count).then((badge) => setFavicon(badge));
  }
);

onBeforeUnmount(() => {
  destroyBadge();
});
</script>

<template>
  <Head>
    <link rel="icon" type="image/png" sizes="128x128" :href="state.favicon" />
  </Head>
  <p class="buttons">
    <button type="button" class="increase" @click="setCount(state.count + 1)">increase</button>
    <span>{{ state.count }}</span>
    <button type="button" class="decrease" @click="state.count - 1 >= 0 && setCount(state.count - 1)">
      decrease
    </button>
  </p>
</template>

✨ Solidjs example

import { Component, createEffect, createSignal } from 'solid-js';
import { MetaProvider, Link } from '@solidjs/meta';

import useFaviconBadgeNotify from 'favicon-badge-notify';
import faviconSvg from './assets/favicon.svg';

const SolidFaviconBadgeNotify: Component = () => {
  const [count, setCount] = createSignal<number>(0);
  const [favicon, setFavicon] = createSignal<string>(faviconSvg);
  const { drawBadge, destroyBadge } = useFaviconBadgeNotify({
    src: faviconSvg
  });

  createEffect(() => {
    drawBadge(count()).then((badge: any) => setFavicon(badge));

    return () => destroyBadge();
  }, [count()]);

  return (
    <div class={styles.App}>
      <MetaProvider>
        <Link rel="icon" type="image/png" sizes="128x128" href={favicon()} />
      </MetaProvider>
      <header class={styles.header}>
        <p class={styles.buttons}>
          <button type="button" class={styles.increase} onClick={() => setCount(count() + 1)}>
            increase
          </button>
          <span>{count}</span>
          <button
            type="button"
            class={styles.decrease}
            onClick={() => count() - 1 >= 0 && setCount(count() - 1)}>
            decrease
          </button>
        </p>
      </header>
    </div>
  );
};

export default SolidFaviconBadgeNotify;

Favicon Badge Notify

πŸ“„ License

🍁 MIT Licensed | Copyright © 2022-present Abdulnasır Olcan and @FaviconBadgeNotify contributors