https://github.com/jsdeveloperr/favicon-badge-notify

🟠 Custom function adds a favicon and a badge
https://github.com/jsdeveloperr/favicon-badge-notify

badge dynamic-favicon-badge dynamic-favicon-badge-notification favicon favicon-badge favicon-badge-notification react react-favicon react-favicon-badge reactjs solidjs solidjs-favicon-badge vue vue-favicon-badge vue3 vuejs

Last synced: 25 days ago
JSON representation

🟠 Custom function adds a favicon and a badge

• Host: GitHub
• URL: https://github.com/jsdeveloperr/favicon-badge-notify
• Owner: jsdeveloperr
• Created: 2022-06-15T20:41:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-28T14:10:38.000Z (over 2 years ago)
• Last Synced: 2024-08-09T20:12:21.688Z (5 months ago)
• Topics: badge, dynamic-favicon-badge, dynamic-favicon-badge-notification, favicon, favicon-badge, favicon-badge-notification, react, react-favicon, react-favicon-badge, reactjs, solidjs, solidjs-favicon-badge, vue, vue-favicon-badge, vue3, vuejs
• Language: TypeScript
• Homepage: https://react-favicon-badge-notify.vercel.app
• Size: 250 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🟠 Favicon Badge Notify

> 
Custom function adds a favicon and a badge




[![npm](https://img.shields.io/npm/v/favicon-badge-notify?style=flat-square)](https://www.npmjs.com/package/favicon-badge-notify)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/favicon-badge-notify?style=flat-square)

![npm](https://img.shields.io/npm/dt/favicon-badge-notify?style=flat-square)

![GitHub license](https://img.shields.io/npm/l/favicon-badge-notify?style=flat-square)



## :books: Introduction

Favicon Badge Notify implemented as custom function.

## :rocket: Examples

Check our Reactjs 👉 [example](https://react-favicon-badge-notify.vercel.app/)

Check our Vuejs 👉 [example](https://vue-favicon-badge-notify.vercel.app/)

Check our Solidjs 👉 [example](https://solid-favicon-badge-notify.vercel.app/)

## :package: Installation

```bash

# install with yarn

yarn add favicon-badge-notify

# install with npm

npm install favicon-badge-notify

# install with pnpm 

pnpm add favicon-badge-notify

```

## :sparkles: Reactjs example

```js

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 (

    


      

        

      

      

        


           setCount((count) => count + 1)}>

            increase

          

          {count}

           count - 1 >= 0 && setCount((count) => count - 1)}>

            decrease

          

        

      

    

  )

}


export default ReactFaviconBadgeNotify

```

## :sparkles: Vuejs example

```vue

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();

});

  

    

  

  


    increase

    {{ state.count }}

    = 0 && setCount(state.count - 1)">

      decrease

    

  


```

## :sparkles: Solidjs example

```js

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(0);

  const [favicon, setFavicon] = createSignal(faviconSvg);

  const { drawBadge, destroyBadge } = useFaviconBadgeNotify({

    src: faviconSvg

  });

  createEffect(() => {

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

    return () => destroyBadge();

  }, [count()]);

  return (

    


      

        

      

      

        


           setCount(count() + 1)}>

            increase

          

          {count}

           count() - 1 >= 0 && setCount(count() - 1)}>

            decrease

          

        

      

    

  );

};


export default SolidFaviconBadgeNotify;

```



     



## 📄 License



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