Custom function adds a favicon and a badge
Favicon Badge Notify implemented as custom function.
Check our Reactjs π example
Check our Vuejs π example
Check our Solidjs π example
# install with yarn yarn add favicon-badge-notify # install with npm npm install favicon-badge-notify # install with pnpm pnpm add favicon-badge-notify
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
<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>
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;
π MIT Licensed | Copyright Β© 2022-present AbdulnasΔ±r Olcan and @FaviconBadgeNotify contributors