@williamgrosset/react-use-favicon

react-use-favicon

✨ React hook to dynamically update your page’s favicon.

Usage

Install

Install the @williamgrosset/react-use-favicon package:

npm install @williamgrosset/react-use-favicon

Import

Import the useFavicon hook:

import React from 'react'
import useFavicon from '@williamgrosset/react-use-favicon'

export default function App() {
  const { url, update, restore } = useFavicon()

  return (
    <div>
      {url && <img src={url} alt="Favicon" />}
      <button onClick={() => update('/favicon.ico')}>Update</button>
      <button onClick={restore}>Restore</button>
    </div>
  )
}

API

useFavicon hook returns:

Prop	Type	Default	Description
url	string	''	Current favicon URL
update	(src: string) => void	-	Update the favicon
restore	() => void	-	Restore the favicon

Parameters

useFavicon hook options:

Prop	Type	Default	Description
selectors	string	"link[rel*='icon']"	Valid CSS selector(s)

Development

Local

pnpm install
pnpm build

Tests

pnpm test

Demo

Within demo directory:

pnpm install
pnpm start

License

MIT