react-usefavicon
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

react-usefavicon

npm version

Check a live demo here

react-usefavicon is a a React.js hook to control the favicon. Use it to update the favicon with a url, base64 encoded image or an emoji in an SVG. Draw anything on top of the favicon, badges, text, checkmarks, anything! This is useful to notify the user of changes or progress, especially if these are long running and the user is expected to switch tabs. GitHub (read more), Netlify and Slack and many more websites do this to and strangely I couldn't find a React hook for it, so I made my own.

Installing

If you use npm

npm install react-usefavicon

For yarn

yarn add react-usefavicon

Usage

import { useFavicon } from "react-usefavicon";

function App() {
  const [
    faviconHref,
    {
      restoreFavicon,
      drawOnFavicon,
      setEmojiFavicon,
      setFaviconHref,
      jsxToFavicon,
    },
  ] = useFavicon();
}

The hook returns an array containing faviconHref and an object of setter functions.

  • faviconHref the current href string of the favicon link element

The setters object contains the following functions

  • restoreFavicon() a function to reset the favicon to whatever it was on mount

  • drawFavicon(drawCallback, [{ options }]} creates a canvas, copies the current favicon to it and calls drawCallback.

    • drawCallback (required) is a user-supplied function takes in a newly created canvas context, which you can draw anything on with the CanvasRenderingContext2D. So whatever you can draw on <canvas>, you can put it on your favicon!
    • options object (optional) with two configurable properties.
      • faviconSize to set the size of the canvas. Default is 256 px
      • clear boolean to start with a blank canvas instead of the favicon. Default is false
      • ...props all other props in the options object are passed on to drawCallback.

    Note: If you call drawFavicon multiple times in successsion, the drawings will stack on top of each other. Simply call restoreFavicon before calling drawFavicon again to ensure you're drawing on the clean, original favicon.

  • setFaviconHref(href) a function to set the href of the favicon tag manually, for example to switch to another static favicon image.

  • setEmojiFavicon(emoji) a function to set the favicon to an emoji. Technically, you can use any character, just know that most text characters don't work as well as emoji's as favicons.

  • jsxToFavicon(SvgEl) a function that takes in an SVG React Element, renders it to a string and sets it as the favicon. Only SVG-type React elements are allowed!

Draw functions

Draw functions take three parameters: a context object, faviconSize, and a props object.

Three simple canvas draw functions are included: drawCircle, drawSquare, and drawTextBubble,

Credits & Inspiration

Ideas & Loose Ends

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.4
    10
    • latest

Version History

Package Sidebar

Install

npm i react-usefavicon

Weekly Downloads

21

Version

1.0.4

License

MIT

Unpacked Size

96.1 kB

Total Files

19

Last publish

Collaborators

  • julesblm