🟠 Favicon Badge Notify
Custom function adds a favicon and a badge
📚 Introduction
Favicon Badge Notify implemented as custom function.
🚀 Examples
Check our Reactjs
Check our Vuejs
Check our Solidjs
📦 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;
